@mbao01/common 0.0.20 → 0.0.22

package/src/components/Menu/Menubar/constants.ts

@@ -0,0 +1,107 @@
+import { cva } from "../../../libs";
+
+const itemVariant = {
+  primary: "focus:bg-primary focus:text-primary-content",
+  secondary: "focus:bg-secondary focus:text-secondary-content",
+  accent: "focus:bg-accent focus:text-accent-content",
+  neutral: "focus:bg-neutral focus:text-neutral-content",
+  base: "focus:bg-base-300 focus:text-base-content",
+  info: "focus:bg-info focus:text-info-content",
+  success: "focus:bg-success focus:text-success-content",
+  warning: "focus:bg-warning focus:text-warning-content",
+  error: "focus:bg-error focus:text-error-content",
+};
+
+const triggerVariant = {
+  primary:
+    "focus:bg-primary focus:text-primary-content data-[state=open]:bg-primary data-[state=open]:text-primary-content",
+  secondary:
+    "focus:bg-secondary focus:text-secondary-content data-[state=open]:bg-secondary data-[state=open]:text-secondary-content",
+  accent:
+    "focus:bg-accent focus:text-accent-content data-[state=open]:bg-accent data-[state=open]:text-accent-content",
+  neutral:
+    "focus:bg-neutral focus:text-neutral-content data-[state=open]:bg-neutral data-[state=open]:text-neutral-content",
+  base: "focus:bg-base-300 focus:text-base-content data-[state=open]:bg-base-300 data-[state=open]:text-base-content",
+  info: "focus:bg-info focus:text-info-content data-[state=open]:bg-info data-[state=open]:text-info-content",
+  success:
+    "focus:bg-success focus:text-success-content data-[state=open]:bg-success data-[state=open]:text-success-content",
+  warning:
+    "focus:bg-warning focus:text-warning-content data-[state=open]:bg-warning data-[state=open]:text-warning-content",
+  error:
+    "focus:bg-error focus:text-error-content data-[state=open]:bg-error data-[state=open]:text-error-content",
+};
+
+export const getMenubarClasses = cva(
+  "flex h-9 items-center space-x-1 rounded-md border bg-base-100 p-1 shadow-sm"
+);
+
+export const getMenubarTriggerClasses = cva(
+  "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
+  {
+    variants: {
+      variant: triggerVariant,
+    },
+  }
+);
+
+export const getMenubarSubTriggerClasses = cva(
+  "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+  {
+    variants: {
+      variant: triggerVariant,
+      inset: {
+        true: "pl-8",
+      },
+    },
+  }
+);
+
+export const getMenubarContentClasses = cva(
+  "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-base-100 p-1 text-base-content shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+);
+
+export const getMenubarSubContentClasses = cva(
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-base-100 p-1 text-base-content shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+);
+
+export const getMenubarItemClasses = cva(
+  "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: itemVariant,
+      inset: {
+        true: "pl-8",
+      },
+    },
+  }
+);
+
+export const getMenubarCheckboxItemClasses = cva(
+  "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: itemVariant,
+    },
+  }
+);
+
+export const getMenubarRadioItemClasses = cva(
+  "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: itemVariant,
+    },
+  }
+);
+
+export const getMenubarLabelClasses = cva("px-2 py-1.5 text-sm font-semibold", {
+  variants: {
+    inset: {
+      true: "pl-8",
+    },
+  },
+});
+
+export const getMenubarSeparatorClasses = cva("-mx-1 my-1 h-px bg-base-200");
+
+export const getMenubarShortcutClasses = cva("ml-auto text-xs tracking-widest");

package/src/components/Menu/Menubar/index.ts

@@ -0,0 +1 @@
+export { Menubar } from "./Menubar";

package/src/components/Menu/Menubar/types.ts

@@ -0,0 +1,66 @@
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { type VariantProps } from "../../../libs";
+import {
+  getMenubarCheckboxItemClasses,
+  getMenubarContentClasses,
+  getMenubarItemClasses,
+  getMenubarLabelClasses,
+  getMenubarRadioItemClasses,
+  getMenubarSeparatorClasses,
+  getMenubarShortcutClasses,
+  getMenubarSubContentClasses,
+  getMenubarSubTriggerClasses,
+  getMenubarTriggerClasses,
+} from "./constants";
+
+export type MenubarProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Root
+>;
+
+export type MenubarTriggerProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Trigger
+> &
+  VariantProps<typeof getMenubarTriggerClasses>;
+
+export type MenubarSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.SubTrigger
+> &
+  VariantProps<typeof getMenubarSubTriggerClasses>;
+
+export type MenubarContentProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Content
+> &
+  VariantProps<typeof getMenubarContentClasses>;
+
+export type MenubarSubContentProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.SubContent
+> &
+  VariantProps<typeof getMenubarSubContentClasses>;
+
+export type MenubarItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Item
+> &
+  VariantProps<typeof getMenubarItemClasses>;
+
+export type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.CheckboxItem
+> &
+  VariantProps<typeof getMenubarCheckboxItemClasses>;
+
+export type MenubarRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.RadioItem
+> &
+  VariantProps<typeof getMenubarRadioItemClasses>;
+
+export type MenubarLabelProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Label
+> &
+  VariantProps<typeof getMenubarLabelClasses>;
+
+export type MenubarSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Separator
+> &
+  VariantProps<typeof getMenubarSeparatorClasses>;
+
+export type MenubarShortcutProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getMenubarShortcutClasses>;

package/src/components/Menu/NavigationMenu/NavigationMenu.tsx

@@ -0,0 +1,117 @@
+import { forwardRef } from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import type {
+  NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+  NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
+} from "./types";
+import { cn } from "../../../utilities";
+import {
+  getNavigationMenuClasses,
+  getNavigationMenuContentClasses,
+  getNavigationMenuIndicatorClasses,
+  getNavigationMenuListClasses,
+  getNavigationMenuTriggerClasses,
+  getNavigationMenuViewportClasses,
+} from "./constants";
+
+const NavigationMenu = ({
+  className,
+  children,
+  ...props
+}: NavigationMenuProps) => (
+  <NavigationMenuPrimitive.Root
+    className={cn(getNavigationMenuClasses(), className)}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+);
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  NavigationMenuListProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(getNavigationMenuListClasses(), className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuTrigger = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  NavigationMenuTriggerProps
+>(({ className, children, variant, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(getNavigationMenuTriggerClasses({ variant }), className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  NavigationMenuContentProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(getNavigationMenuContentClasses(), className)}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuViewport = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  NavigationMenuViewportProps
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(getNavigationMenuViewportClasses(), className)}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  NavigationMenuIndicatorProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(getNavigationMenuIndicatorClasses(), className)}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+NavigationMenu.List = NavigationMenuList;
+NavigationMenu.Item = NavigationMenuPrimitive.Item;
+NavigationMenu.Content = NavigationMenuContent;
+NavigationMenu.Trigger = NavigationMenuTrigger;
+NavigationMenu.Link = NavigationMenuPrimitive.Link;
+NavigationMenu.Indicator = NavigationMenuIndicator;
+NavigationMenu.Viewport = NavigationMenuViewport;
+
+export { NavigationMenu };

package/src/components/Menu/NavigationMenu/constants.ts

@@ -0,0 +1,47 @@
+import { cva } from "../../../libs";
+
+export const getNavigationMenuClasses = cva(
+  "relative z-10 flex max-w-max flex-1 items-center justify-center"
+);
+
+export const getNavigationMenuListClasses = cva(
+  "group flex flex-1 list-none items-center justify-center space-x-1"
+);
+
+export const getNavigationMenuTriggerClasses = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "hover:bg-primary hover:text-primary-content focus:bg-primary focus:text-primary-content data-[active]:bg-primary/50 data-[state=open]:bg-primary/50",
+        secondary:
+          "hover:bg-secondary hover:text-secondary-content focus:bg-secondary focus:text-secondary-content data-[active]:bg-secondary/50 data-[state=open]:bg-secondary/50",
+        accent:
+          "hover:bg-accent hover:text-accent-content focus:bg-accent focus:text-accent-content data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+        neutral:
+          "hover:bg-neutral hover:text-neutral-content focus:bg-neutral focus:text-neutral-content data-[active]:bg-neutral/50 data-[state=open]:bg-neutral/50",
+        base: "hover:bg-base-300 hover:text-base-content focus:bg-base-300 focus:text-base-content data-[active]:bg-base-300/50 data-[state=open]:bg-base-300/50",
+        info: "hover:bg-info hover:text-info-content focus:bg-info focus:text-info-content data-[active]:bg-info/50 data-[state=open]:bg-info/50",
+        success:
+          "hover:bg-success hover:text-success-content focus:bg-success focus:text-success-content data-[active]:bg-success/50 data-[state=open]:bg-success/50",
+        warning:
+          "hover:bg-warning hover:text-warning-content focus:bg-warning focus:text-warning-content data-[active]:bg-warning/50 data-[state=open]:bg-warning/50",
+        error:
+          "hover:bg-error hover:text-error-content focus:bg-error focus:text-error-content data-[active]:bg-error/50 data-[state=open]:bg-error/50",
+      },
+    },
+  }
+);
+
+export const getNavigationMenuContentClasses = cva(
+  "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto"
+);
+
+export const getNavigationMenuViewportClasses = cva(
+  "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-base-100 shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
+);
+
+export const getNavigationMenuIndicatorClasses = cva(
+  "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in"
+);

package/src/components/Menu/NavigationMenu/index.ts

@@ -0,0 +1 @@
+export { NavigationMenu } from "./NavigationMenu";

package/src/components/Menu/NavigationMenu/types.ts

@@ -0,0 +1,40 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { type VariantProps } from "../../../libs";
+import {
+  getNavigationMenuClasses,
+  getNavigationMenuContentClasses,
+  getNavigationMenuIndicatorClasses,
+  getNavigationMenuListClasses,
+  getNavigationMenuTriggerClasses,
+  getNavigationMenuViewportClasses,
+} from "./constants";
+
+export type NavigationMenuProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Root
+> &
+  VariantProps<typeof getNavigationMenuClasses>;
+
+export type NavigationMenuListProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.List
+> &
+  VariantProps<typeof getNavigationMenuListClasses>;
+
+export type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Trigger
+> &
+  VariantProps<typeof getNavigationMenuTriggerClasses>;
+
+export type NavigationMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Content
+> &
+  VariantProps<typeof getNavigationMenuContentClasses>;
+
+export type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Viewport
+> &
+  VariantProps<typeof getNavigationMenuViewportClasses>;
+
+export type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Indicator
+> &
+  VariantProps<typeof getNavigationMenuIndicatorClasses>;

package/src/components/Menu/index.ts

@@ -0,0 +1,4 @@
+export { ContextMenu } from "./ContextMenu";
+export { DropdownMenu } from "./DropdownMenu";
+export { Menubar } from "./Menubar";
+export { NavigationMenu } from "./NavigationMenu";

package/src/components/Table/Table.tsx

@@ -0,0 +1,85 @@
+import { forwardRef } from "react";
+import { cn } from "../../utilities";
+import type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+} from "./types";
+import { getTableClasses, getTableHeaderClasses } from "./constants";
+
+const Table = ({
+  className,
+  caption,
+  zebra,
+  size,
+  pinRow,
+  pinColumn,
+  ...props
+}: TableProps) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      className={cn(
+        getTableClasses({ caption, zebra, size, pinRow, pinColumn }),
+        className
+      )}
+      {...props}
+    />
+  </div>
+);
+Table.displayName = "Table";
+
+const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <thead
+      ref={ref}
+      className={cn(getTableHeaderClasses(), className)}
+      {...props}
+    />
+  )
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  (props, ref) => <tbody ref={ref} {...props} />
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
+  (props, ref) => <tfoot ref={ref} {...props} />
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  (props, ref) => <tr ref={ref} {...props} />
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
+  (props, ref) => <th ref={ref} {...props} />
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  (props, ref) => <td ref={ref} {...props} />
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
+  (props, ref) => <caption ref={ref} {...props} />
+);
+TableCaption.displayName = "TableCaption";
+
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Footer = TableFooter;
+Table.Head = TableHead;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Caption = TableCaption;
+
+export { Table };

package/src/components/Table/constants.ts

@@ -0,0 +1,27 @@
+import { cva } from "../../libs";
+
+export const getTableClasses = cva("table", {
+  variants: {
+    caption: {
+      top: "caption-top",
+      bottom: "caption-bottom",
+    },
+    zebra: {
+      true: "table-zebra",
+    },
+    pinRow: {
+      true: "table-pin-rows",
+    },
+    pinColumn: {
+      true: "table-pin-cols",
+    },
+    size: {
+      xs: "table-xs",
+      sm: "table-sm",
+      md: "table-md",
+      lg: "table-lg",
+    },
+  },
+});
+
+export const getTableHeaderClasses = cva("[&_tr]:border-b");

package/src/components/Table/index.ts

@@ -0,0 +1 @@
+export { Table } from "./Table";

package/src/components/Table/types.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from "../../libs";
+import { getTableClasses } from "./constants";
+
+export type TableProps = React.HTMLAttributes<HTMLTableElement> &
+  VariantProps<typeof getTableClasses>;
+
+export type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
+
+export type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
+
+export type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
+
+export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;

package/src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { type ChangeEvent, useLayoutEffect, useState } from "react";
+import { type ThemeSwitchProps } from "./types";
+import { cn, getTheme, saveTheme } from "../../utilities";
+import { getThemeSwitchClasses } from "./constants";
+
+const MoonIcon = ({ title }: { title: string }) => (
+  <svg
+    className="swap-on h-4 w-4 fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    {title && <title>{title}</title>}
+    <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+  </svg>
+);
+
+const SunIcon = ({ title }: { title: string }) => (
+  <svg
+    className="swap-off h-4 w-4 fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    xlinkTitle="sun-icon"
+  >
+    {title && <title>{title}</title>}
+    <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+  </svg>
+);
+
+export const ThemeSwitch = ({
+  name,
+  render,
+  className,
+  theme: defaultTheme,
+  ...props
+}: ThemeSwitchProps) => {
+  const [theme, setTheme] = useState(defaultTheme ?? getTheme);
+
+  useLayoutEffect(() => {
+    if (theme) saveTheme(theme);
+  }, [theme]);
+
+  if (render) {
+    return render({ theme, setTheme });
+  }
+
+  const changeTheme = (e: ChangeEvent<HTMLInputElement>) => {
+    const t = e.target.checked ? "light" : "dark";
+    setTheme(t);
+  };
+
+  return (
+    <label className={cn(getThemeSwitchClasses(), className)} {...props}>
+      {/* this hidden checkbox controls the state */}
+      <input
+        hidden
+        name={name}
+        type="checkbox"
+        className="theme-controller"
+        checked={theme === "light"}
+        onChange={changeTheme}
+      />
+      <MoonIcon title="Switch to dark theme" />
+      <SunIcon title="Switch to light theme" />
+    </label>
+  );
+};

package/src/components/ThemeSwitch/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getThemeSwitchClasses = cva(
+  "swap swap-rotate flex items-center gap-4"
+);

package/src/components/ThemeSwitch/index.ts

@@ -0,0 +1 @@
+export { ThemeSwitch } from "./ThemeSwitch";

package/src/components/ThemeSwitch/types.ts

@@ -0,0 +1,10 @@
+import { type Theme } from "../../utilities";
+
+export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
+  name?: string;
+  theme?: Theme;
+  render?: (params: {
+    theme: Theme | null;
+    setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;
+  }) => JSX.Element;
+};

package/src/index.ts

@@ -1,7 +1,9 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Menu";
 export * from "./components/Pagination";
+export * from "./components/ThemeSwitch";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";
 
@@ -18,6 +20,7 @@ export * from "./components/Progress";
 export * from "./components/ScrollArea";
 export * from "./components/Separator";
 export * from "./components/Sonner";
+export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Text";
 

package/src/utilities/theme.ts

@@ -1,4 +1,4 @@
-type Theme = "dark" | "light" | "system";
+export type Theme = "dark" | "light";
 
 export const getTheme = () => {
   if (typeof window === "undefined") return null;
@@ -7,13 +7,11 @@ export const getTheme = () => {
   if (!t)
     t = window.matchMedia("(prefers-color-scheme: dark)")?.matches
       ? "dark"
-      : window.matchMedia("(prefers-color-scheme: light)")?.matches
-        ? "light"
-        : "system";
+      : "light";
   return t;
 };
 
 export const saveTheme = (theme: Theme) => {
   document.body.setAttribute("data-theme", theme);
-  localStorage.setItem("__theme", theme);
+  window.localStorage.setItem("__theme", theme);
 };