fix: merge main

getpingback · Dec 3, 2024 · 1f461b1 · 1f461b1
2 parents a278adb + 1085db0
commit 1f461b1
Show file tree

Hide file tree

Showing 11 changed files with 588 additions and 399 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,12 +2,84 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [0.0.258](https://github.com/getpingback/ui/compare/v0.0.257...v0.0.258) (2024-11-26)
+### [0.0.273](https://github.com/getpingback/ui/compare/v0.0.272...v0.0.273) (2024-12-02)
 
 
 ### Bug Fixes
 
-* tooltip trigger ([9185dec](https://github.com/getpingback/ui/commits/9185dec0c9b9c019318b11a94afca7f6c2ab018e))
+* current page change ([940b482](https://github.com/getpingback/ui/commits/940b482b0974fb48e0600d7db71d8f07defe25ea))
+
+### [0.0.271](https://github.com/getpingback/ui/compare/v0.0.269...v0.0.271) (2024-12-02)
+
+
+### Bug Fixes
+
+* merge ([a3a5bcb](https://github.com/getpingback/ui/commits/a3a5bcbc6e473aae9aed27159e272482a8e975b4))
+* range picker nav ([651396d](https://github.com/getpingback/ui/commits/651396dc05ea3a6f2f4e4bbe502dd16e60e89c19))
+
+### [0.0.261](https://github.com/getpingback/ui/compare/v0.0.260...v0.0.261) (2024-11-27)
+
+### [0.0.269](https://github.com/getpingback/ui/compare/v0.0.268...v0.0.269) (2024-11-28)
+
+
+### Bug Fixes
+
+* use button-label-variable ([c7f6681](https://github.com/getpingback/ui/commits/c7f6681ff4807a69e0ebfbf96ada991cb24264b9))
+
+### [0.0.267](https://github.com/getpingback/ui/compare/v0.0.266...v0.0.267) (2024-11-28)
+
+
+### Bug Fixes
+
+* **variable-input:** initalContent over placeholder ([e127035](https://github.com/getpingback/ui/commits/e1270356c341f3edb42c6cd8e6104d078befe007))
+
+### [0.0.265](https://github.com/getpingback/ui/compare/v0.0.264...v0.0.265) (2024-11-27)
+
+
+### Bug Fixes
+
+* **variable-input:** initial content ([9a44ec0](https://github.com/getpingback/ui/commits/9a44ec0db6bc2e8e47056ec24e8939eb21c5b897))
+
+### [0.0.263](https://github.com/getpingback/ui/compare/v0.0.262...v0.0.263) (2024-11-27)
+
+
+### Bug Fixes
+
+* **variable-input:** reset search on close ([ff0075e](https://github.com/getpingback/ui/commits/ff0075e17bd53aac5ceca5a8f7ea73cb5f85684f))
+
+### [0.0.261](https://github.com/getpingback/ui/compare/v0.0.260...v0.0.261) (2024-11-27)
+
+
+### Features
+
+* **variable-input:** add custom fields and combobox ([3e89a07](https://github.com/getpingback/ui/commits/3e89a07602d029ad5a8ee5490631503a52706c9a))
+
+
+### Bug Fixes
+
+* change selection scope ([ec3c5b3](https://github.com/getpingback/ui/commits/ec3c5b31c39522303b26f2ca136d96c819806c8b))
+* **variable-input:** remove unused components ([844a5db](https://github.com/getpingback/ui/commits/844a5db2bd55b9fbdebd73dfcc14c1786cc3ae1a))
+
+### [0.0.260](https://github.com/getpingback/ui/compare/v0.0.257...v0.0.260) (2024-11-27)
+
+
+### Bug Fixes
+
+* radio colors ([978f8b0](https://github.com/getpingback/ui/commits/978f8b09fdde4d140475965e3e8c2bac87c1b09a))
+
+### [0.0.259](https://github.com/getpingback/ui/compare/v0.0.257...v0.0.259) (2024-11-27)
+
+
+### Bug Fixes
+
+* radio colors ([978f8b0](https://github.com/getpingback/ui/commits/978f8b09fdde4d140475965e3e8c2bac87c1b09a))
+
+### [0.0.258](https://github.com/getpingback/ui/compare/v0.0.254...v0.0.258) (2024-11-26)
+
+
+### Bug Fixes
+
+* radio colors ([978f8b0](https://github.com/getpingback/ui/commits/978f8b09fdde4d140475965e3e8c2bac87c1b09a))
 
 ### [0.0.256](https://github.com/getpingback/ui/compare/v0.0.254...v0.0.256) (2024-11-26)
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@getpingback/ui",
   "author": "Pingback Team",
-  "version": "0.0.259",
+  "version": "0.0.274",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -11,44 +11,34 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-transparent',
         outline:
-          'border border-[#D4D4D8] bg-transparent text-secondary-foreground text-opacity-10 hover:bg-[rgba(112,119,128,0.00)] hover:[box-shadow:0px_0px_0px_3px_rgba(113,_113,_122,_0.12)] focus-visible:[box-shadow:0px_0px_0px_3px_rgba(113,_113,_122,_0.12)]',
+          'border border-[#D4D4D8] bg-transparent !text-secondary-foreground text-opacity-10 hover:bg-[rgba(112,119,128,0.00)] hover:[box-shadow:0px_0px_0px_3px_rgba(113,_113,_122,_0.12)] focus-visible:[box-shadow:0px_0px_0px_3px_rgba(113,_113,_122,_0.12)]',
         ghost: 'text-button-ghost-foreground hover:bg-button-ghost',
         solid: 'bg-[#9061F9] text-[#FFFFFF] hover:shadow-solid',
-        clear: 'bg-transparent text-[#52525B] opacity-65 hover:opacity-100',
+        clear: 'bg-transparent text-[#52525B] opacity-65 hover:opacity-100'
       },
       size: {
         default: 'h-9 rounded-lg px-3 py-2',
         sm: 'h-8 rounded-lg px-3 text-xs',
         lg: 'h-10 rounded-lg px-8',
         icon: 'h-9 w-9 rounded-full',
-        combobox: 'min-h-[36px] rounded-lg px-3 py-2',
-      },
+        combobox: 'min-h-[36px] rounded-lg px-3 py-2'
+      }
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default',
-    },
+      size: 'default'
+    }
   }
 );
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+});
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
@@ -1,32 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { cn } from '@/lib/utils';
 import { cva } from 'class-variance-authority';
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-} from '@stash-ui/regular-icons';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@stash-ui/regular-icons';
 import { getPaginationRange, DOTS } from '@/lib/utils';
 
 const buttonVariants = cva(
   'h-[32px] min-w-[32px] px-3 inline-flex items-center justify-center whitespace-nowrap text-sm font-medium focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 transition-all duration-300 ease-in-out',
   {
     variants: {
       variant: {
-        default:
-          'bg-transparent px-0 opacity-85 text-button-page-color-clear hover:bg-button-page-ghost hover:opacity-1',
-        solid: 'bg-button-page-solid text-button-page-color-solid px-3 ',
+        default: 'bg-transparent px-0 opacity-85 text-button-page-color-clear hover:bg-button-page-ghost hover:opacity-1',
+        solid: 'bg-button-page-solid text-button-page-color-solid px-3 '
       },
       rounded: {
         default: 'rounded-lg',
-        full: 'rounded-full',
-      },
+        full: 'rounded-full'
+      }
     },
     defaultVariants: {
       variant: 'default',
-      rounded: 'default',
-    },
+      rounded: 'default'
+    }
   }
 );
 
@@ -36,20 +30,13 @@ export interface PaginationItemProps extends React.ComponentProps<'button'> {
   disabled?: boolean;
 }
 
-function PaginationItem({
-  children,
-  isActive,
-  isRounded,
-  className,
-  disabled,
-  ...props
-}: PaginationItemProps) {
+function PaginationItem({ children, isActive, isRounded, className, disabled, ...props }: PaginationItemProps) {
   return (
     <button
       className={cn(
         buttonVariants({
           variant: isActive ? 'solid' : 'default',
-          rounded: isRounded ? 'full' : 'default',
+          rounded: isRounded ? 'full' : 'default'
         }),
         disabled ? 'cursor-not-allowed  opacity-45' : '',
         className
@@ -68,12 +55,7 @@ export interface ControllersProps extends React.ComponentProps<'button'> {
   disabled?: boolean;
 }
 
-function Controller({
-  children,
-  onClick,
-  disabled,
-  ...props
-}: ControllersProps) {
+function Controller({ children, onClick, disabled, ...props }: ControllersProps) {
   return (
     <PaginationItem onClick={onClick} disabled={disabled} {...props}>
       {children}
@@ -90,22 +72,14 @@ export interface PaginationProps extends React.ComponentProps<'nav'> {
   className?: string;
 }
 
-const Pagination = ({
-  totalPages,
-  onPageChange,
-  page,
-  siblingCount = 1,
-  round = false,
-  className,
-  ...props
-}: PaginationProps) => {
-  const [currentPage, setCurrentPage] = useState(page);
+const Pagination = ({ totalPages, onPageChange, page, siblingCount = 1, round = false, className, ...props }: PaginationProps) => {
+  const [currentPage, setCurrentPage] = useState();
 
-  const paginationRange = getPaginationRange(
-    currentPage,
-    totalPages,
-    siblingCount
-  );
+  useEffect(() => {
+    setCurrentPage(page);
+  }, [page]);
+
+  const paginationRange = getPaginationRange(currentPage, totalPages, siblingCount);
 
   const handleSetActivePage = (page: number) => {
     if (page < 1 || page > totalPages) return;
@@ -114,38 +88,24 @@ const Pagination = ({
   };
 
   return (
-    <nav
-      role='navigation'
-      aria-label='pagination'
-      className={cn('mx-auto flex w-full justify-center')}
-      data-testid='pagination'
-      {...props}
-    >
-      <Controller
-        onClick={() => handleSetActivePage(1)}
-        disabled={currentPage === 1}
-        data-testid='pagination-first'
-      >
+    <nav role="navigation" aria-label="pagination" className={cn('mx-auto flex w-full justify-center')} data-testid="pagination" {...props}>
+      <Controller onClick={() => handleSetActivePage(1)} disabled={currentPage === 1} data-testid="pagination-first">
         <ChevronDoubleLeftIcon />
       </Controller>
       <Controller
         onClick={() => handleSetActivePage(currentPage - 1)}
-        className='mr-2'
+        className="mr-2"
         disabled={currentPage === 1}
-        data-testid='pagination-previous'
+        data-testid="pagination-previous"
       >
         <ChevronLeftIcon />
       </Controller>
-      <span className='flex gap-1'>
+      <span className="flex gap-1">
         {paginationRange?.map((page, index) => {
           const formattedPage = page as number;
           if (page === DOTS) {
             return (
-              <PaginationItem
-                key={index}
-                disabled
-                data-testid='pagination-dots'
-              >
+              <PaginationItem key={index} disabled data-testid="pagination-dots">
                 &hellip;
               </PaginationItem>
             );
@@ -164,17 +124,13 @@ const Pagination = ({
       </span>
       <Controller
         onClick={() => handleSetActivePage(currentPage + 1)}
-        className='ml-2'
+        className="ml-2"
         disabled={currentPage === totalPages}
-        data-testid='pagination-next'
+        data-testid="pagination-next"
       >
         <ChevronRightIcon />
       </Controller>
-      <Controller
-        onClick={() => handleSetActivePage(totalPages)}
-        disabled={currentPage === totalPages}
-        data-testid='pagination-last'
-      >
+      <Controller onClick={() => handleSetActivePage(totalPages)} disabled={currentPage === totalPages} data-testid="pagination-last">
         <ChevronDoubleRightIcon />
       </Controller>
     </nav>

diff --git a/src/components/radio-group/radio-group.tsx b/src/components/radio-group/radio-group.tsx
@@ -2,50 +2,38 @@ import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { cn } from '@/lib/utils';
 
-interface RadioGroupProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
   direction?: 'horizontal' | 'vertical';
 }
 
 interface RadioItemProps extends RadioGroupPrimitive.RadioGroupItemProps {
   children?: React.ReactNode;
 }
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  RadioGroupProps
->(({ children, direction = 'horizontal', ...props }, ref) => (
-  <RadioGroupPrimitive.Root
-    ref={ref}
-    className={cn('flex gap-1', { 'flex-col': direction === 'horizontal' })}
-    {...props}
-  >
-    {children}
-  </RadioGroupPrimitive.Root>
-));
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
+  ({ children, direction = 'horizontal', ...props }, ref) => (
+    <RadioGroupPrimitive.Root ref={ref} className={cn('flex gap-1', { 'flex-col': direction === 'horizontal' })} {...props}>
+      {children}
+    </RadioGroupPrimitive.Root>
+  )
+);
 
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-const RadioItem = ({
-  id,
-  value,
-  children,
-  disabled,
-  ...props
-}: RadioItemProps) => (
+const RadioItem = ({ id, value, children, disabled, ...props }: RadioItemProps) => (
   <div className="flex items-center gap-2 h-8 rounded-lg w-fit transition duration-200 py-1 px-2">
     <RadioGroupPrimitive.Item
       value={value}
       id={id}
       disabled={disabled}
-      className="peer border border-input-outline w-4 h-4 rounded-full enabled:hover:ring-8 enabled:hover:ring-coolGray-500/10 aria-checked:ring-input-informative aria-checked:border-4 enabled:aria-checked:border-input-filled transition duration-200 enabled:hover:cursor-pointer disabled:border-input-outline/45 disabled:hover:cursor-not-allowed"
+      className="peer border border-solid border-input-outline w-4 h-4 rounded-full enabled:hover:ring-8 enabled:hover:ring-input-outline-hover aria-checked:ring-input-selected-hover aria-checked:border-4 enabled:aria-checked:border-input-selected transition duration-200 enabled:hover:cursor-pointer disabled:border-input-outline/45 disabled:hover:cursor-not-allowed"
       {...props}
     >
       <RadioGroupPrimitive.Indicator />
     </RadioGroupPrimitive.Item>
 
     <label
-      className="text-secondary-foreground text-sm peer-hover:cursor-pointer peer-disabled:hover:cursor-not-allowed peer-focus:underline duration-200 transition peer-enabled:peer-aria-checked:text-highlighted-foreground peer-enabled:peer-aria-checked:decoration-input-filled peer-disabled:text-secondary-foreground/45"
+      className="text-secondary-foreground text-sm peer-hover:cursor-pointer peer-disabled:hover:cursor-not-allowed peer-focus:underline duration-200 transition peer-enabled:peer-aria-checked:text-input-selected-label peer-enabled:peer-aria-checked:decoration-input-selected peer-disabled:text-secondary-foreground/45"
       htmlFor={id}
     >
       {children}