@luanthnh/cntt-ui 0.1.5

package/components/ui/Chart/index.tsx

@@ -0,0 +1,322 @@
+'use client';
+
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '@/lib/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === 'string'
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center',
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                          {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                              indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          },
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      'flex flex-1 justify-between leading-none',
+                      nestLabel ? 'items-end' : 'items-center',
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

package/components/ui/Checkbox/index.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from './index';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'accent'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    size: 'default',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+  },
+};
+
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

package/components/ui/Checkbox/index.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+import { motion, SVGMotionProps, type HTMLMotionProps } from 'motion/react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+
+import { getStrictContext } from '@/lib/get-strict-context';
+import { cn } from '@/lib/utils';
+import { useControlledState } from '@/hooks/use-controlled-state';
+
+const checkboxVariants = cva(
+  'peer focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&[data-state=checked],&[data-state=indeterminate]]:bg-primary [&[data-state=checked],&[data-state=indeterminate]]:text-primary-foreground flex shrink-0 items-center justify-center transition-colors duration-500 outline-none focus-visible:ring-[3px] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background border',
+        accent: 'bg-input',
+      },
+      size: {
+        default: 'size-5 rounded-sm',
+        sm: 'size-4.5 rounded-[5px]',
+        lg: 'size-6 rounded-[7px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const checkboxIndicatorVariants = cva('', {
+  variants: {
+    size: {
+      default: 'size-3.5',
+      sm: 'size-3',
+      lg: 'size-4',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+type CheckboxContextType = {
+  isChecked: boolean | 'indeterminate';
+  setIsChecked: (checked: boolean | 'indeterminate') => void;
+};
+
+const [CheckboxProvider, useCheckbox] = getStrictContext<CheckboxContextType>('CheckboxContext');
+
+type CheckboxProps = HTMLMotionProps<'button'> &
+  Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'asChild'> &
+  VariantProps<typeof checkboxVariants>;
+
+function Checkbox({
+  defaultChecked,
+  checked,
+  onCheckedChange,
+  disabled,
+  required,
+  name,
+  value,
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: CheckboxProps) {
+  const [isChecked, setIsChecked] = useControlledState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  return (
+    <CheckboxProvider value={{ isChecked, setIsChecked }}>
+      <CheckboxPrimitive.Root
+        defaultChecked={defaultChecked}
+        checked={checked}
+        onCheckedChange={setIsChecked}
+        disabled={disabled}
+        required={required}
+        name={name}
+        value={value}
+        asChild
+      >
+        <motion.button
+          data-slot="checkbox"
+          whileTap={{ scale: 0.95 }}
+          whileHover={{ scale: 1.05 }}
+          className={cn(checkboxVariants({ variant, size, className }))}
+          {...props}
+        >
+          {children}
+          <CheckboxIndicator size={size} />
+        </motion.button>
+      </CheckboxPrimitive.Root>
+    </CheckboxProvider>
+  );
+}
+
+type CheckboxIndicatorProps = SVGMotionProps<SVGSVGElement> &
+  VariantProps<typeof checkboxIndicatorVariants>;
+
+function CheckboxIndicator({ className, size, ...props }: CheckboxIndicatorProps) {
+  const { isChecked } = useCheckbox();
+
+  return (
+    <CheckboxPrimitive.Indicator forceMount asChild>
+      <motion.svg
+        data-slot="checkbox-indicator"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth="3.5"
+        stroke="currentColor"
+        initial="unchecked"
+        animate={isChecked ? 'checked' : 'unchecked'}
+        className={cn(checkboxIndicatorVariants({ size }), className)}
+        {...props}
+      >
+        {isChecked === 'indeterminate' ? (
+          <motion.line
+            x1="5"
+            y1="12"
+            x2="19"
+            y2="12"
+            strokeLinecap="round"
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{
+              pathLength: 1,
+              opacity: 1,
+              transition: { duration: 0.2 },
+            }}
+          />
+        ) : (
+          <motion.path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M4.5 12.75l6 6 9-13.5"
+            variants={{
+              checked: {
+                pathLength: 1,
+                opacity: 1,
+                transition: {
+                  duration: 0.2,
+                  delay: 0.2,
+                },
+              },
+              unchecked: {
+                pathLength: 0,
+                opacity: 0,
+                transition: {
+                  duration: 0.2,
+                },
+              },
+            }}
+          />
+        )}
+      </motion.svg>
+    </CheckboxPrimitive.Indicator>
+  );
+}
+
+export { Checkbox, type CheckboxProps };

package/components/ui/CircleProcess/index.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CircleProcess from './index';
+
+const meta: Meta<typeof CircleProcess> = {
+  title: 'UI/CircleProcess',
+  component: CircleProcess,
+  tags: ['autodocs'],
+  argTypes: {
+    progress: {
+      control: { type: 'range', min: 0, max: 100 },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CircleProcess>;
+
+export const Default: Story = {
+  args: {
+    progress: 75,
+  },
+};
+
+export const Complete: Story = {
+  args: {
+    progress: 100,
+  },
+};

package/components/ui/CircleProcess/index.tsx

@@ -0,0 +1,50 @@
+import { useTheme } from 'next-themes';
+
+import { cn } from '@/lib/utils';
+
+interface Props {
+  progress: number;
+  className?: string;
+}
+
+export default function CircleProcess({ progress = 0, className }: Props) {
+  const numericProgress = Number(progress) / 100;
+  const circumference = 2 * Math.PI * 39;
+  const offset = circumference * (1 - numericProgress);
+
+  const { theme, systemTheme } = useTheme();
+
+  const actualTheme = theme === 'system' ? systemTheme : theme;
+  const strokeColor = actualTheme === 'dark' ? '#1e2b47' : '#e5e7eb';
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className={cn('relative h-[40px] w-[40px]', className)}>
+        <svg className="absolute top-0 left-0 h-full w-full -rotate-90" viewBox="0 0 100 100">
+          <circle cx="50" cy="50" r="40" fill="none" stroke={strokeColor} strokeWidth="4" />
+          <circle
+            cx="50"
+            cy="50"
+            r="40"
+            fill="none"
+            stroke="url(#progress-gradient)"
+            strokeWidth="4"
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            strokeLinecap="round"
+          />
+          <defs>
+            <linearGradient id="progress-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#4e51f0" />
+              <stop offset="100%" stopColor="#1053f3" />
+            </linearGradient>
+          </defs>
+        </svg>
+
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-medium text-gray-900 dark:text-gray-50">
+          {Math.round(numericProgress * 100)}%
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/ui/Collapsible/index.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from './index';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'UI/Collapsible',
+  component: Collapsible,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Collapsible {...args} className="w-87.5 space-y-2">
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+        <CollapsibleTrigger>
+          <Button variant="ghost" size="sm" className="w-9 p-0">
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+      <CollapsiblePanel className="space-y-2">
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/react</div>
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
+      </CollapsiblePanel>
+    </Collapsible>
+  ),
+};