@thangnqdev/ui 0.1.2 → 0.2.1

package/src/layout/Container.tsx

@@ -1,53 +1,53 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const containerVariants = cva('w-full mx-auto', {
-  variants: {
-    size: {
-      sm: 'max-w-screen-sm',
-      md: 'max-w-screen-md',
-      lg: 'max-w-screen-lg',
-      xl: 'max-w-screen-xl',
-      '2xl': 'max-w-screen-2xl',
-      fluid: 'max-w-full',
-    },
-    padding: {
-      none: 'px-0',
-      sm: 'px-4',
-      md: 'px-6',
-      lg: 'px-8 sm:px-12',
-    },
-    centered: {
-      true: 'flex flex-col items-center justify-center',
-      false: '',
-    },
-  },
-  defaultVariants: {
-    size: 'xl',
-    padding: 'md',
-    centered: false,
-  },
-});
-
-export interface ContainerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof containerVariants> {
-  as?: React.ElementType;
-}
-
-export const Container = forwardRef<HTMLDivElement, ContainerProps>(
-  ({ className, size, padding, centered, as: Component = 'div', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(containerVariants({ size, padding, centered }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-
-Container.displayName = 'Container';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const containerVariants = cva('w-full mx-auto', {
+  variants: {
+    size: {
+      sm: 'max-w-screen-sm',
+      md: 'max-w-screen-md',
+      lg: 'max-w-screen-lg',
+      xl: 'max-w-screen-xl',
+      '2xl': 'max-w-screen-2xl',
+      fluid: 'max-w-full',
+    },
+    padding: {
+      none: 'px-0',
+      sm: 'px-4',
+      md: 'px-6',
+      lg: 'px-8 sm:px-12',
+    },
+    centered: {
+      true: 'flex flex-col items-center justify-center',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    size: 'xl',
+    padding: 'md',
+    centered: false,
+  },
+});
+
+export interface ContainerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof containerVariants> {
+  as?: React.ElementType;
+}
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, size, padding, centered, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(containerVariants({ size, padding, centered }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Container.displayName = 'Container';

package/src/layout/Divider.tsx

@@ -1,61 +1,61 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const dividerVariants = cva('border-0 flex-shrink-0', {
-  variants: {
-    orientation: {
-      horizontal: 'w-full h-px border-t border-[var(--ui-border-subtle)] my-4',
-      vertical: 'h-full w-px border-l border-[var(--ui-border-subtle)] mx-4 inline-block align-middle self-stretch',
-    },
-    variant: {
-      solid: 'border-solid',
-      dashed: 'border-dashed',
-      dotted: 'border-dotted',
-    },
-  },
-  defaultVariants: {
-    orientation: 'horizontal',
-    variant: 'solid',
-  },
-});
-
-export interface DividerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof dividerVariants> {
-  label?: React.ReactNode;
-}
-
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(
-  ({ className, orientation = 'horizontal', variant, label, children, ...props }, ref) => {
-    const content = label || children;
-
-    if (orientation === 'horizontal' && content) {
-      return (
-        <div
-          ref={ref}
-          role="separator"
-          aria-orientation="horizontal"
-          className={cn('flex items-center w-full my-4 text-xs font-medium text-[var(--ui-text-muted)]', className)}
-          {...props}
-        >
-          <div className={cn('flex-grow border-t border-[var(--ui-border-subtle)]', dividerVariants({ variant }))} />
-          <span className="px-3 select-none">{content}</span>
-          <div className={cn('flex-grow border-t border-[var(--ui-border-subtle)]', dividerVariants({ variant }))} />
-        </div>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        role="separator"
-        aria-orientation={orientation || 'horizontal'}
-        className={cn(dividerVariants({ orientation, variant }), className)}
-        {...props}
-      />
-    );
-  }
-);
-
-Divider.displayName = 'Divider';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const dividerVariants = cva('border-0 flex-shrink-0', {
+  variants: {
+    orientation: {
+      horizontal: 'w-full h-px border-t border-[var(--ui-border-subtle)] my-4',
+      vertical: 'h-full w-px border-l border-[var(--ui-border-subtle)] mx-4 inline-block align-middle self-stretch',
+    },
+    variant: {
+      solid: 'border-solid',
+      dashed: 'border-dashed',
+      dotted: 'border-dotted',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid',
+  },
+});
+
+export interface DividerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof dividerVariants> {
+  label?: React.ReactNode;
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ className, orientation = 'horizontal', variant, label, children, ...props }, ref) => {
+    const content = label || children;
+
+    if (orientation === 'horizontal' && content) {
+      return (
+        <div
+          ref={ref}
+          role="separator"
+          aria-orientation="horizontal"
+          className={cn('flex items-center w-full my-4 text-xs font-medium text-[var(--ui-text-muted)]', className)}
+          {...props}
+        >
+          <div className={cn('flex-grow border-t border-[var(--ui-border-subtle)]', dividerVariants({ variant }))} />
+          <span className="px-3 select-none">{content}</span>
+          <div className={cn('flex-grow border-t border-[var(--ui-border-subtle)]', dividerVariants({ variant }))} />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        aria-orientation={orientation || 'horizontal'}
+        className={cn(dividerVariants({ orientation, variant }), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

package/src/layout/Flex.tsx

@@ -1,79 +1,79 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const flexVariants = cva('flex', {
-  variants: {
-    direction: {
-      row: 'flex-row',
-      'row-reverse': 'flex-row-reverse',
-      column: 'flex-col',
-      'column-reverse': 'flex-col-reverse',
-    },
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      stretch: 'items-stretch',
-      baseline: 'items-baseline',
-    },
-    justify: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-      around: 'justify-around',
-      evenly: 'justify-evenly',
-    },
-    wrap: {
-      nowrap: 'flex-nowrap',
-      wrap: 'flex-wrap',
-      'wrap-reverse': 'flex-wrap-reverse',
-    },
-    gap: {
-      0: 'gap-0',
-      1: 'gap-1',
-      2: 'gap-2',
-      3: 'gap-3',
-      4: 'gap-4',
-      5: 'gap-5',
-      6: 'gap-6',
-      8: 'gap-8',
-      10: 'gap-10',
-      12: 'gap-12',
-    },
-    inline: {
-      true: 'inline-flex',
-      false: 'flex',
-    },
-  },
-  defaultVariants: {
-    direction: 'row',
-    align: 'stretch',
-    justify: 'start',
-    wrap: 'nowrap',
-    inline: false,
-  },
-});
-
-export interface FlexProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof flexVariants> {
-  as?: React.ElementType;
-}
-
-export const Flex = forwardRef<HTMLDivElement, FlexProps>(
-  ({ className, direction, align, justify, wrap, gap, inline, as: Component = 'div', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(flexVariants({ direction, align, justify, wrap, gap, inline }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-
-Flex.displayName = 'Flex';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const flexVariants = cva('flex', {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      'row-reverse': 'flex-row-reverse',
+      column: 'flex-col',
+      'column-reverse': 'flex-col-reverse',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+      baseline: 'items-baseline',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      nowrap: 'flex-nowrap',
+      wrap: 'flex-wrap',
+      'wrap-reverse': 'flex-wrap-reverse',
+    },
+    gap: {
+      0: 'gap-0',
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+      5: 'gap-5',
+      6: 'gap-6',
+      8: 'gap-8',
+      10: 'gap-10',
+      12: 'gap-12',
+    },
+    inline: {
+      true: 'inline-flex',
+      false: 'flex',
+    },
+  },
+  defaultVariants: {
+    direction: 'row',
+    align: 'stretch',
+    justify: 'start',
+    wrap: 'nowrap',
+    inline: false,
+  },
+});
+
+export interface FlexProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof flexVariants> {
+  as?: React.ElementType;
+}
+
+export const Flex = forwardRef<HTMLDivElement, FlexProps>(
+  ({ className, direction, align, justify, wrap, gap, inline, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(flexVariants({ direction, align, justify, wrap, gap, inline }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Flex.displayName = 'Flex';

package/src/layout/Grid.tsx

@@ -1,124 +1,124 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const gridVariants = cva('grid', {
-  variants: {
-    cols: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-1 sm:grid-cols-2',
-      3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
-      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-      5: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
-      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
-      12: 'grid-cols-12',
-    },
-    gap: {
-      0: 'gap-0',
-      1: 'gap-1',
-      2: 'gap-2',
-      3: 'gap-3',
-      4: 'gap-4',
-      5: 'gap-5',
-      6: 'gap-6',
-      8: 'gap-8',
-      10: 'gap-10',
-      12: 'gap-12',
-    },
-    flow: {
-      row: 'grid-flow-row',
-      col: 'grid-flow-col',
-      dense: 'grid-flow-dense',
-      'row-dense': 'grid-flow-row-dense',
-      'col-dense': 'grid-flow-col-dense',
-    },
-  },
-  defaultVariants: {
-    cols: 1,
-    gap: 4,
-    flow: 'row',
-  },
-});
-
-export interface GridProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof gridVariants> {
-  as?: React.ElementType;
-}
-
-export const Grid = forwardRef<HTMLDivElement, GridProps>(
-  ({ className, cols, gap, flow, as: Component = 'div', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(gridVariants({ cols, gap, flow }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-Grid.displayName = 'Grid';
-
-export const gridItemVariants = cva('', {
-  variants: {
-    colSpan: {
-      1: 'col-span-1',
-      2: 'col-span-2',
-      3: 'col-span-3',
-      4: 'col-span-4',
-      5: 'col-span-5',
-      6: 'col-span-6',
-      7: 'col-span-7',
-      8: 'col-span-8',
-      9: 'col-span-9',
-      10: 'col-span-10',
-      11: 'col-span-11',
-      12: 'col-span-12',
-      full: 'col-span-full',
-    },
-    rowSpan: {
-      1: 'row-span-1',
-      2: 'row-span-2',
-      3: 'row-span-3',
-      4: 'row-span-4',
-      5: 'row-span-5',
-      6: 'row-span-6',
-      full: 'row-span-full',
-    },
-    colStart: {
-      1: 'col-start-1',
-      2: 'col-start-2',
-      3: 'col-start-3',
-      4: 'col-start-4',
-      5: 'col-start-5',
-      6: 'col-start-6',
-      auto: 'col-start-auto',
-    },
-  },
-  defaultVariants: {
-    colSpan: 1,
-  },
-});
-
-export interface GridItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof gridItemVariants> {
-  as?: React.ElementType;
-}
-
-export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
-  ({ className, colSpan, rowSpan, colStart, as: Component = 'div', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(gridItemVariants({ colSpan, rowSpan, colStart }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-GridItem.displayName = 'GridItem';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const gridVariants = cva('grid', {
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 sm:grid-cols-2',
+      3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+      5: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
+      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+      12: 'grid-cols-12',
+    },
+    gap: {
+      0: 'gap-0',
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+      5: 'gap-5',
+      6: 'gap-6',
+      8: 'gap-8',
+      10: 'gap-10',
+      12: 'gap-12',
+    },
+    flow: {
+      row: 'grid-flow-row',
+      col: 'grid-flow-col',
+      dense: 'grid-flow-dense',
+      'row-dense': 'grid-flow-row-dense',
+      'col-dense': 'grid-flow-col-dense',
+    },
+  },
+  defaultVariants: {
+    cols: 1,
+    gap: 4,
+    flow: 'row',
+  },
+});
+
+export interface GridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof gridVariants> {
+  as?: React.ElementType;
+}
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
+  ({ className, cols, gap, flow, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(gridVariants({ cols, gap, flow }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+Grid.displayName = 'Grid';
+
+export const gridItemVariants = cva('', {
+  variants: {
+    colSpan: {
+      1: 'col-span-1',
+      2: 'col-span-2',
+      3: 'col-span-3',
+      4: 'col-span-4',
+      5: 'col-span-5',
+      6: 'col-span-6',
+      7: 'col-span-7',
+      8: 'col-span-8',
+      9: 'col-span-9',
+      10: 'col-span-10',
+      11: 'col-span-11',
+      12: 'col-span-12',
+      full: 'col-span-full',
+    },
+    rowSpan: {
+      1: 'row-span-1',
+      2: 'row-span-2',
+      3: 'row-span-3',
+      4: 'row-span-4',
+      5: 'row-span-5',
+      6: 'row-span-6',
+      full: 'row-span-full',
+    },
+    colStart: {
+      1: 'col-start-1',
+      2: 'col-start-2',
+      3: 'col-start-3',
+      4: 'col-start-4',
+      5: 'col-start-5',
+      6: 'col-start-6',
+      auto: 'col-start-auto',
+    },
+  },
+  defaultVariants: {
+    colSpan: 1,
+  },
+});
+
+export interface GridItemProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof gridItemVariants> {
+  as?: React.ElementType;
+}
+
+export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
+  ({ className, colSpan, rowSpan, colStart, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(gridItemVariants({ colSpan, rowSpan, colStart }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+GridItem.displayName = 'GridItem';