@regardio/react 0.7.24 → 0.8.0

package/src/button/button.tsx

@@ -2,80 +2,72 @@ import { Button as BaseUIButton } from '@base-ui/react/button';
 import { tv } from '@regardio/tailwind/utils';
 import type { ComponentProps } from 'react';
 
-const buttonVariants = {
+export const buttonVariants = {
   destructive: [
-    'bg-red-600',
-    'text-white',
-    'border-red-600',
-    'hover:bg-red-700',
-    'hover:border-red-700',
-    'focus-visible:ring-2',
-    'focus-visible:ring-red-500',
-    'focus-visible:ring-offset-2',
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'transition-colors',
+    'bg-destructive',
+    'text-destructive-foreground',
+    'border-destructive',
+    'hover:bg-destructive-hover',
+    'hover:border-destructive-hover',
   ],
   ghost: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'transition-colors',
     'bg-transparent',
-    'text-gray-900',
+    'text-foreground',
     'border-transparent',
-    'hover:bg-gray-100',
-    'hover:border-transparent',
-    'focus-visible:ring-2',
-    'focus-visible:ring-gray-500',
-    'focus-visible:ring-offset-2',
+    'hover:bg-muted',
   ],
   outline: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'transition-colors',
     'bg-transparent',
-    'text-gray-900',
-    'border-gray-300',
-    'hover:bg-gray-50',
-    'hover:border-gray-400',
-    'focus-visible:ring-2',
-    'focus-visible:ring-gray-500',
-    'focus-visible:ring-offset-2',
+    'text-foreground',
+    'border-current',
+    'hover:bg-muted',
   ],
   primary: [
-    'bg-blue-600',
-    'text-white',
-    'border-blue-600',
-    'hover:bg-blue-700',
-    'hover:border-blue-700',
-    'focus-visible:ring-2',
-    'focus-visible:ring-blue-500',
-    'focus-visible:ring-offset-2',
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'transition-colors',
+    'bg-primary',
+    'text-primary-foreground',
+    'border-primary',
+    'hover:bg-primary-hover',
+    'hover:border-primary-hover',
   ],
   secondary: [
-    'bg-gray-100',
-    'text-gray-900',
-    'border-gray-300',
-    'hover:bg-gray-200',
-    'hover:border-gray-400',
-    'focus-visible:ring-2',
-    'focus-visible:ring-gray-500',
-    'focus-visible:ring-offset-2',
-  ],
-} as const;
-
-const buttonSizes = {
-  '2xl': ['px-10', 'py-5', 'text-2xl', 'font-medium', 'rounded-lg'],
-  lg: ['px-6', 'py-3', 'text-lg', 'font-medium', 'rounded-lg'],
-  md: ['px-4', 'py-2', 'text-base', 'font-medium', 'rounded-md'],
-  sm: ['px-3', 'py-1.5', 'text-sm', 'font-medium', 'rounded-md'],
-  xl: ['px-8', 'py-4', 'text-xl', 'font-medium', 'rounded-lg'],
-} as const;
-
-const button = tv({
-  base: [
     'inline-flex',
     'items-center',
     'justify-center',
-    'border',
     'transition-colors',
-    'duration-200',
-    'ease-in-out',
-    'disabled:opacity-50',
-    'disabled:cursor-not-allowed',
-    'disabled:pointer-events-none',
+    'bg-secondary',
+    'text-secondary-foreground',
+    'border-secondary',
+    'hover:bg-secondary-hover',
+    'hover:border-secondary-hover',
   ],
+} as const;
+
+export const buttonSizes = {
+  '2xl': ['px-8', 'py-4', 'text-xl'],
+  lg: ['px-6', 'py-3', 'text-lg'],
+  md: ['px-4', 'py-2', 'text-base'],
+  sm: ['px-3', 'py-1.5', 'text-sm'],
+  xl: ['px-7', 'py-3.5', 'text-lg'],
+} as const;
+
+export const button: ReturnType<typeof tv> = tv({
+  base: [],
   defaultVariants: {
     size: 'md',
     variant: 'primary',
@@ -92,15 +84,14 @@ export type ButtonSize = keyof typeof buttonSizes;
 export interface ButtonProps extends Omit<ComponentProps<typeof BaseUIButton>, 'className'> {
   className?: string;
   size?: ButtonSize;
-  type?: 'button' | 'submit' | 'reset';
   variant?: ButtonVariant;
 }
 
 export const Button = ({
   children,
   className,
-  variant,
   size,
+  variant,
   ...props
 }: ButtonProps): React.JSX.Element => {
   return (

package/src/button/index.ts

@@ -1,2 +1,2 @@
-export type { ButtonProps, ButtonSize, ButtonVariant } from './button';
-export { Button } from './button';
+export type { ButtonProps, ButtonVariant } from './button';
+export { Button, buttonVariants } from './button';

package/src/checkbox/checkbox.tsx

@@ -4,22 +4,19 @@ import type { ComponentProps } from 'react';
 
 const checkboxRoot = tv({
   base: [
-    'h-4',
-    'w-4',
+    'flex',
+    'items-center',
+    'justify-center',
     'rounded',
-    'border',
-    'border-gray-300',
-    'bg-white',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-blue-500',
-    'focus:ring-offset-2',
+    'focus-visible:outline-2',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
     'disabled:cursor-not-allowed',
-    'disabled:opacity-50',
-    'data-[checked]:bg-blue-600',
-    'data-[checked]:border-blue-600',
+    'data-[checked]:bg-primary',
+    'data-[unchecked]:border',
+    'data-[unchecked]:border-current',
+    'data-[unchecked]:bg-background-muted',
     'transition-colors',
-    'duration-200',
     'cursor-pointer',
   ],
   defaultVariants: {
@@ -35,7 +32,7 @@ const checkboxRoot = tv({
 });
 
 const checkboxIndicator = tv({
-  base: ['flex', 'items-center', 'justify-center', 'text-white', 'data-[unchecked]:invisible'],
+  base: ['flex', 'text-primary-foreground', 'data-[unchecked]:hidden'],
 });
 
 export type CheckboxSize = 'sm' | 'md' | 'lg';

package/src/combobox/combobox.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Combobox } from './combobox';
+
+const meta: Meta<typeof Combobox.Root> = {
+  component: Combobox.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Combobox',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-80">
+      <Combobox.Root items={fruits}>
+        <div className="block text-foreground mb-2">
+          Select a fruit
+          <Combobox.InputGroup className="mt-1">
+            <Combobox.Input placeholder="Search fruits..." />
+            <Combobox.Trigger>
+              <Combobox.Icon />
+            </Combobox.Trigger>
+          </Combobox.InputGroup>
+        </div>
+        <Combobox.Portal>
+          <Combobox.Positioner>
+            <Combobox.Popup>
+              <Combobox.List>
+                {fruits.map((fruit) => (
+                  <Combobox.Item
+                    key={fruit}
+                    value={fruit}
+                  >
+                    <Combobox.ItemIndicator />
+                    {fruit}
+                  </Combobox.Item>
+                ))}
+              </Combobox.List>
+            </Combobox.Popup>
+          </Combobox.Positioner>
+        </Combobox.Portal>
+      </Combobox.Root>
+    </div>
+  ),
+};
+
+export const WithClear: Story = {
+  render: () => (
+    <div className="w-80">
+      <Combobox.Root items={fruits}>
+        <div className="block text-foreground mb-2">
+          Select a fruit
+          <Combobox.InputGroup className="mt-1">
+            <Combobox.Input
+              className="pr-20"
+              placeholder="Search fruits..."
+            />
+            <Combobox.Clear />
+            <Combobox.Trigger>
+              <Combobox.Icon />
+            </Combobox.Trigger>
+          </Combobox.InputGroup>
+        </div>
+        <Combobox.Portal>
+          <Combobox.Positioner>
+            <Combobox.Popup>
+              <Combobox.List>
+                <Combobox.Empty>No results found</Combobox.Empty>
+                {fruits.map((fruit) => (
+                  <Combobox.Item
+                    key={fruit}
+                    value={fruit}
+                  >
+                    <Combobox.ItemIndicator />
+                    {fruit}
+                  </Combobox.Item>
+                ))}
+              </Combobox.List>
+            </Combobox.Popup>
+          </Combobox.Positioner>
+        </Combobox.Portal>
+      </Combobox.Root>
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="w-80">
+      <Combobox.Root
+        items={fruits}
+        multiple
+      >
+        <div className="block text-foreground mb-2">
+          Select fruits
+          <Combobox.InputGroup className="mt-1">
+            <Combobox.Chips>
+              <Combobox.Chip>
+                <Combobox.ChipRemove />
+              </Combobox.Chip>
+              <Combobox.Input
+                className="flex-1 min-w-[120px] bg-transparent focus-visible:outline-none"
+                placeholder="Search fruits..."
+              />
+            </Combobox.Chips>
+            <Combobox.Trigger>
+              <Combobox.Icon />
+            </Combobox.Trigger>
+          </Combobox.InputGroup>
+        </div>
+        <Combobox.Portal>
+          <Combobox.Positioner>
+            <Combobox.Popup>
+              <Combobox.List>
+                {fruits.map((fruit) => (
+                  <Combobox.Item
+                    key={fruit}
+                    value={fruit}
+                  >
+                    <Combobox.ItemIndicator />
+                    {fruit}
+                  </Combobox.Item>
+                ))}
+              </Combobox.List>
+            </Combobox.Popup>
+          </Combobox.Positioner>
+        </Combobox.Portal>
+      </Combobox.Root>
+    </div>
+  ),
+};