@trycompai/design-system 1.0.1 → 1.0.2

package/src/components/molecules/tabs.tsx

@@ -11,19 +11,20 @@ function Tabs({
     <TabsPrimitive.Root
       data-slot="tabs"
       data-orientation={orientation}
-      className="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col"
+      className="group/tabs flex data-[orientation=horizontal]:flex-col"
       {...props}
     />
   );
 }
 
 const tabsListVariants = cva(
-  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none data-[variant=underline]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
   {
     variants: {
       variant: {
         default: 'bg-muted',
         line: 'gap-1 bg-transparent',
+        underline: 'p-0 pb-px bg-transparent w-full justify-start items-stretch shadow-[inset_0_-1px_0_0_var(--color-border)]',
       },
     },
     defaultVariants: {
@@ -50,7 +51,7 @@ function TabsTrigger({ ...props }: Omit<TabsPrimitive.Tab.Props, 'className'>) {
   return (
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
-      className="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100"
+      className="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none group-data-[variant=underline]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:bg-transparent group-data-[variant=underline]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:px-3 group-data-[variant=underline]/tabs-list:py-2 group-data-[variant=underline]/tabs-list:mb-0 group-data-[variant=underline]/tabs-list:hover:bg-muted group-data-[variant=underline]/tabs-list:rounded-t-md group-data-[variant=underline]/tabs-list:flex-none group-data-[variant=underline]/tabs-list:justify-start group-data-[variant=underline]/tabs-list:text-left dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=underline]/tabs-list:data-active:border-transparent dark:group-data-[variant=underline]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:after:bg-foreground group-data-[variant=underline]/tabs-list:after:bg-primary group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=underline]/tabs-list:after:h-[3px] group-data-[variant=underline]/tabs-list:after:bottom-0 group-data-[variant=underline]/tabs-list:after:rounded-t-sm group-data-[variant=underline]/tabs-list:h-auto group-data-[variant=underline]/tabs-list:data-active:after:opacity-100"
       {...props}
     />
   );
@@ -60,7 +61,7 @@ function TabsContent({ ...props }: Omit<TabsPrimitive.Panel.Props, 'className'>)
   return (
     <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className="text-sm flex-1 outline-none"
+      className="text-sm flex-1 outline-none animate-in fade-in-0 duration-200"
       {...props}
     />
   );

package/src/components/molecules/theme-switcher.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Moon, Screen, Sun } from '@carbon/icons-react';
+import * as React from 'react';
+
+const themeSwitcherVariants = cva(
+  'inline-flex items-center rounded-full p-0.5 bg-muted',
+  {
+    variants: {
+      size: {
+        sm: 'gap-0.5',
+        default: 'gap-0.5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+const themeSwitcherButtonVariants = cva(
+  'inline-flex items-center justify-center rounded-full transition-all duration-200',
+  {
+    variants: {
+      size: {
+        sm: 'size-6 [&_svg]:size-3',
+        default: 'size-7 [&_svg]:size-3.5',
+      },
+      isActive: {
+        true: 'bg-background text-foreground shadow-sm',
+        false: 'text-muted-foreground hover:text-foreground',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      isActive: false,
+    },
+  },
+);
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeSwitcherProps
+  extends Omit<React.ComponentProps<'div'>, 'className' | 'onChange'>,
+    VariantProps<typeof themeSwitcherVariants> {
+  /** Current theme value */
+  value?: Theme;
+  /** Default theme value (uncontrolled) */
+  defaultValue?: Theme;
+  /** Called when theme changes */
+  onChange?: (theme: Theme) => void;
+  /** Show system option */
+  showSystem?: boolean;
+}
+
+function ThemeSwitcher({
+  value: valueProp,
+  defaultValue = 'system',
+  onChange,
+  showSystem = true,
+  size = 'default',
+  ...props
+}: ThemeSwitcherProps) {
+  const [internalValue, setInternalValue] = React.useState<Theme>(defaultValue);
+  const value = valueProp ?? internalValue;
+
+  const handleChange = (newTheme: Theme) => {
+    if (valueProp === undefined) {
+      setInternalValue(newTheme);
+    }
+    onChange?.(newTheme);
+  };
+
+  const options: { value: Theme; icon: React.ReactNode; label: string }[] = [
+    { value: 'light', icon: <Sun />, label: 'Light mode' },
+    { value: 'dark', icon: <Moon />, label: 'Dark mode' },
+    ...(showSystem
+      ? [{ value: 'system' as Theme, icon: <Screen />, label: 'System theme' }]
+      : []),
+  ];
+
+  return (
+    <div
+      data-slot="theme-switcher"
+      role="radiogroup"
+      aria-label="Theme"
+      className={themeSwitcherVariants({ size })}
+      {...props}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="radio"
+          aria-checked={value === option.value}
+          aria-label={option.label}
+          onClick={() => handleChange(option.value)}
+          className={themeSwitcherButtonVariants({
+            size,
+            isActive: value === option.value,
+          })}
+        >
+          {option.icon}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Simple light/dark toggle for compact spaces
+interface ThemeToggleProps extends Omit<React.ComponentProps<'button'>, 'className' | 'onChange'> {
+  /** Current theme - true for dark, false for light */
+  isDark?: boolean;
+  /** Called when theme changes */
+  onChange?: (isDark: boolean) => void;
+  /** Size variant */
+  size?: 'sm' | 'default';
+}
+
+function ThemeToggle({
+  isDark: isDarkProp,
+  onChange,
+  size = 'default',
+  ...props
+}: ThemeToggleProps) {
+  const [internalIsDark, setInternalIsDark] = React.useState(false);
+  const isDark = isDarkProp ?? internalIsDark;
+
+  const handleToggle = () => {
+    const newValue = !isDark;
+    if (isDarkProp === undefined) {
+      setInternalIsDark(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const iconSize = size === 'sm' ? 'size-3' : 'size-3.5';
+  const buttonSize = size === 'sm' ? 'h-6 w-12' : 'h-7 w-14';
+  const thumbSize = size === 'sm' ? 'size-5' : 'size-6';
+  const thumbTranslate = size === 'sm' ? 'translate-x-[26px]' : 'translate-x-[30px]';
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      onClick={handleToggle}
+      data-slot="theme-toggle"
+      className={`${buttonSize} relative inline-flex items-center rounded-full bg-muted p-0.5 transition-colors`}
+      {...props}
+    >
+      {/* Background icons */}
+      <span className="absolute inset-0 flex items-center justify-between px-1.5">
+        <Sun className={`${iconSize} text-amber-500`} />
+        <Moon className={`${iconSize} text-blue-400`} />
+      </span>
+      {/* Sliding thumb */}
+      <span
+        className={`${thumbSize} relative z-10 flex items-center justify-center rounded-full bg-background shadow-sm transition-transform duration-200 ${
+          isDark ? thumbTranslate : 'translate-x-0'
+        }`}
+      >
+        {isDark ? (
+          <Moon className={`${iconSize} text-blue-500`} />
+        ) : (
+          <Sun className={`${iconSize} text-amber-500`} />
+        )}
+      </span>
+    </button>
+  );
+}
+
+export { ThemeSwitcher, ThemeToggle };
+export type { ThemeSwitcherProps, ThemeToggleProps, Theme };