Added additional components

.changeset/red-comics-cry.md

@@ -0,0 +1,7 @@
+---
+"@utima/ui": minor
+---
+
+Added `Input` component
+Added `Table` component
+Added `Label` component

packages/ui/plugin.cjs

@@ -33,7 +33,6 @@ const baseColors = {
     fg: '#000000',
   },
   border: '#d1d5db',
-  input: '#d1d5db',
   placeholder: '#6b7280',
   popover: {
     bg: '#f3f4f6',
@@ -47,7 +46,10 @@ const defaultOptions = {
     // Base colors
     background: baseColors.background,
     foreground: baseColors.foreground,
+    placeholder: baseColors.placeholder,
+    border: baseColors.border,
 
+    // Variant colors
     muted: {
       bg: baseColors.muted.bg,
       fg: baseColors.muted.fg,
@@ -77,16 +79,19 @@ const defaultOptions = {
       fg: baseColors.accent.fg,
     },
 
-    // Utility colors
-    border: baseColors.border,
-    input: baseColors.input,
-    placeholder: baseColors.placeholder,
-
     // Component-specific colors
     popover: {
       bg: baseColors.popover.bg,
       fg: baseColors.popover.fg,
     },
+    table: {
+      bg: baseColors.background,
+      fg: baseColors.foreground,
+      border: baseColors.border,
+    },
+    input: {
+      border: baseColors.border,
+    },
   },
 };
 
@@ -140,6 +145,14 @@ module.exports = plugin.withOptions(
               DEFAULT: colors.popover.bg,
               fg: colors.popover.fg,
             },
+            table: {
+              DEFAULT: colors.table.bg,
+              fg: colors.table.fg,
+              border: colors.table.border,
+            },
+            input: {
+              border: colors.input.border,
+            },
           },
         },
       },

packages/ui/plugin.d.ts

@@ -47,6 +47,14 @@ type TailwindPluginOptions = {
       bg: string;
       fg: string;
     };
+    table: {
+      fg: string;
+      bg: string;
+      border: string;
+    };
+    input: {
+      border: string;
+    };
   };
 };
 

packages/ui/src/components/avatar/index.ts

@@ -1,3 +1,4 @@
+// Primitives exports
 export { AvatarFallback as Fallback } from './AvatarFallback';
 export { AvatarImage as Image } from './AvatarImage';
 export { Root } from '@radix-ui/react-avatar';

packages/ui/src/components/input/Input.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from './Input';
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  tags: ['autodocs'],
+  title: 'Components/Input',
+  args: {
+    size: 'md',
+    placeholder: 'Placeholder',
+    variant: 'default',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Basic: Story = {};

packages/ui/src/components/input/Input.styles.tsx

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority';
+
+import { twOverrides } from '@/overrides';
+
+export const inputDef = twOverrides(
+  {
+    input:
+      'transition-all text-foreground font-normal flex w-full rounded-md border placeholder-placeholder bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:border-foreground disabled:cursor-not-allowed disabled:opacity-60',
+    variants: {
+      size: {
+        sm: 'px-2 py-1.5 text-xs',
+        md: 'px-3 py-2 text-sm',
+        lg: 'px-4 py-3 text-base',
+      },
+      variant: {
+        default:
+          'border-input-border focus-visible:border-foreground hover:border-foreground',
+        danger:
+          'border-danger focus-visible:border-danger hover:border-danger/30',
+        success:
+          'border-success focus-visible:border-success hover:border-success/30',
+      },
+    },
+  },
+  'input',
+);
+
+export const inputStyles = cva(inputDef.input, {
+  variants: inputDef.variants,
+});

packages/ui/src/components/input/Input.tsx

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'class-variance-authority';
+import { forwardRef, type ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { inputStyles } from './Input.styles';
+
+type InputProps = Omit<ComponentProps<'input'>, 'size'> &
+  VariantProps<typeof inputStyles>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, size = 'md', variant = 'default', ...props },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      className={cn(inputStyles({ size, variant }), className)}
+      {...props}
+    />
+  );
+});

packages/ui/src/components/label/Label.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Label } from './Label';
+
+const meta: Meta<typeof Label> = {
+  component: Label,
+  tags: ['autodocs'],
+  title: 'Components/Label',
+  args: {
+    children: 'Label',
+    size: 'md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Basic: Story = {};

packages/ui/src/components/label/Label.styles.tsx

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority';
+
+import { twOverrides } from '@/overrides';
+
+export const labelDef = twOverrides(
+  {
+    label:
+      'text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+    variants: {
+      size: {
+        xs: 'text-xs leading-3',
+        sm: 'text-xs leading-4',
+        md: 'text-sm text-sm leading-5',
+        lg: 'text-base leading-6',
+        xl: 'text-lg leading-7',
+      },
+    },
+  },
+  'label',
+);
+
+export const labelStyles = cva(labelDef.label, {
+  variants: labelDef.variants,
+});

packages/ui/src/components/label/Label.tsx

@@ -0,0 +1,22 @@
+import { Root } from '@radix-ui/react-label';
+import type { VariantProps } from 'class-variance-authority';
+import { forwardRef, type ComponentProps, type ElementRef } from 'react';
+
+import { cn } from '@/utils';
+
+import { labelStyles } from './Label.styles';
+
+type LabelProps = Omit<ComponentProps<typeof Root>, 'size'> &
+  VariantProps<typeof labelStyles>;
+
+export const Label = forwardRef<ElementRef<typeof Root>, LabelProps>(
+  function Label({ className, size = 'md', ...props }, ref) {
+    return (
+      <Root
+        ref={ref}
+        className={cn(labelStyles({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);

packages/ui/src/components/table/Table.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as Table from './index';
+
+const meta: Meta<typeof Table.Root> = {
+  component: Table.Root,
+  tags: ['autodocs'],
+  title: 'Components/Table',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table.Root>;
+
+export const Basic: Story = {
+  args: {
+    children: (
+      <Table.Root>
+        <Table.Head>
+          <Table.HRow>
+            <Table.HCol>Header 1</Table.HCol>
+            <Table.HCol>Header 2</Table.HCol>
+          </Table.HRow>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Col>Cell 1</Table.Col>
+            <Table.Col>Cell 2</Table.Col>
+          </Table.Row>
+        </Table.Body>
+        <Table.Foot>
+          <Table.HRow>
+            <Table.HCol>Cell 1</Table.HCol>
+            <Table.HCol>Cell 2</Table.HCol>
+          </Table.HRow>
+        </Table.Foot>
+      </Table.Root>
+    ),
+  },
+};

packages/ui/src/components/table/Table.styles.tsx

@@ -0,0 +1,16 @@
+import { twOverrides } from '@/overrides';
+
+export const tableDef = twOverrides(
+  {
+    table:
+      'w-full text-sm text-left text-foreground rounded-tl-md rounded-tr-md overflow-hidden',
+    body: '',
+    foot: 'text-xs uppercase text-table-fg bg-table',
+    head: 'text-table-fg bg-table',
+    col: 'p-2 py-3 h-[70px]',
+    row: 'bg-white hover:bg-border/10 border-b border-table-border',
+    hRow: 'text-table-fg bg-table',
+    hCol: 'p-2',
+  },
+  'table',
+);

packages/ui/src/components/table/Table.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableProps = ComponentProps<'table'>;
+
+export function Table({ className, ...props }: TableProps) {
+  return <table className={cn(tableDef.table, className)} {...props} />;
+}

packages/ui/src/components/table/TableBody.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableBodyProps = ComponentProps<'tbody'>;
+
+export function TableBody({ className, ...props }: TableBodyProps) {
+  return <tbody className={cn(tableDef.body, className)} {...props} />;
+}

packages/ui/src/components/table/TableCol.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableColProps = ComponentProps<'td'>;
+
+export function TableCol({ className, ...props }: TableColProps) {
+  return <td className={cn(tableDef.col, className)} {...props} />;
+}

packages/ui/src/components/table/TableFoot.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableFootProps = ComponentProps<'thead'>;
+
+export function TableFoot({ className, ...props }: TableFootProps) {
+  return <tfoot className={cn(tableDef.foot, className)} {...props} />;
+}

packages/ui/src/components/table/TableHCol.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableHColProps = ComponentProps<'th'>;
+
+export function TableHCol({ className, children, ...props }: TableHColProps) {
+  return (
+    <th className={cn(tableDef.hCol, className)} {...props}>
+      {children}
+    </th>
+  );
+}

packages/ui/src/components/table/TableHRow.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableHRowProps = ComponentProps<'tr'>;
+
+export function TableHRow({ className, ...props }: TableHRowProps) {
+  return <tr className={cn(tableDef.hRow, className)} {...props} />;
+}

packages/ui/src/components/table/TableHead.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableHeadProps = ComponentProps<'thead'>;
+
+export function TableHead({ className, ...props }: TableHeadProps) {
+  return <thead className={cn(tableDef.head, className)} {...props} />;
+}

packages/ui/src/components/table/TableRow.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { tableDef } from './Table.styles';
+
+type TableRowProps = ComponentProps<'tr'>;
+
+export function TableRow({ className, ...props }: TableRowProps) {
+  return <tr className={cn(tableDef.row, className)} {...props} />;
+}

packages/ui/src/components/table/index.ts

@@ -0,0 +1,8 @@
+export { Table as Root } from './Table';
+export { TableBody as Body } from './TableBody';
+export { TableCol as Col } from './TableCol';
+export { TableFoot as Foot } from './TableFoot';
+export { TableHCol as HCol } from './TableHCol';
+export { TableHRow as HRow } from './TableHRow';
+export { TableHead as Head } from './TableHead';
+export { TableRow as Row } from './TableRow';