@rimelight/ui 0.0.37 → 0.0.39

package/src/themes/select.theme.ts

@@ -1,29 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSelectTheme = () =>
-  defineTheme({
-    slots: ["root", "label", "trigger", "content", "item", "itemText", "itemIcon"],
-    base: {
-      root: "relative w-full flex flex-col gap-1.5",
-      label: "text-sm font-medium text-foreground",
-      trigger:
-        "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      content:
-        "absolute z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-lg transition-all w-full mt-1 max-h-60 overflow-y-auto",
-      item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      itemText: "truncate",
-      itemIcon: "ml-auto size-4"
-    },
-    variants: {
-      size: {
-        sm: { trigger: "h-8 px-2 text-xs", item: "py-1 px-1.5 text-xs" },
-        md: { trigger: "h-9 px-3 text-sm", item: "py-1.5 px-2 text-sm" },
-        lg: { trigger: "h-10 px-4 text-base", item: "py-2 px-2.5 text-base" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  })
-
-export default createSelectTheme()

package/src/themes/separator.theme.ts

@@ -1,147 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSeparatorTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
-    base: {
-      root: "flex items-center align-center text-center",
-      border: "",
-      container: "font-medium text-default flex",
-      icon: "shrink-0 size-5",
-      avatar: "shrink-0",
-      avatarSize: "2xs",
-      label: "text-sm"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { border: `border-${color}` }])),
-        neutral: { border: "border-default" }
-      },
-      orientation: {
-        horizontal: {
-          root: "w-full flex-row",
-          border: "w-full",
-          container: "whitespace-nowrap"
-        },
-        vertical: {
-          root: "h-full flex-col",
-          border: "h-full",
-          container: ""
-        }
-      },
-      size: {
-        xs: {},
-        sm: {},
-        md: {},
-        lg: {},
-        xl: {}
-      },
-      position: {
-        start: {},
-        center: {},
-        end: {}
-      },
-      type: {
-        solid: {
-          border: "border-solid"
-        },
-        dashed: {
-          border: "border-dashed"
-        },
-        dotted: {
-          border: "border-dotted"
-        }
-      }
-    },
-    compoundVariants: [
-      {
-        orientation: "horizontal",
-        position: "start",
-        classNames: { container: "me-3" }
-      },
-      {
-        orientation: "horizontal",
-        position: "center",
-        classNames: { container: "mx-3" }
-      },
-      {
-        orientation: "horizontal",
-        position: "end",
-        classNames: { container: "ms-3" }
-      },
-      {
-        orientation: "vertical",
-        position: "start",
-        classNames: { container: "mb-2" }
-      },
-      {
-        orientation: "vertical",
-        position: "center",
-        classNames: { container: "my-2" }
-      },
-      {
-        orientation: "vertical",
-        position: "end",
-        classNames: { container: "mt-2" }
-      },
-      {
-        orientation: "horizontal",
-        size: "xs",
-        classNames: { border: "border-t" }
-      },
-      {
-        orientation: "horizontal",
-        size: "sm",
-        classNames: { border: "border-t-[2px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "md",
-        classNames: { border: "border-t-[3px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "lg",
-        classNames: { border: "border-t-[4px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "xl",
-        classNames: { border: "border-t-[5px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "xs",
-        classNames: { border: "border-s" }
-      },
-      {
-        orientation: "vertical",
-        size: "sm",
-        classNames: { border: "border-s-[2px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "md",
-        classNames: { border: "border-s-[3px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "lg",
-        classNames: { border: "border-s-[4px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "xl",
-        classNames: { border: "border-s-[5px]" }
-      }
-    ],
-    defaultVariants: {
-      color: "neutral",
-      size: "xs",
-      type: "solid",
-      orientation: "horizontal"
-    }
-  })
-
-export default createSeparatorTheme()

package/src/themes/sidebar.theme.ts

@@ -1,38 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSidebarTheme = () =>
-  defineTheme({
-    slots: ["root", "header", "content", "footer", "item", "itemLink", "itemIcon", "itemBadge"],
-    base: {
-      root: "flex flex-col h-full w-64 bg-background border-r border-border shadow-sm transition-all duration-300",
-      header:
-        "flex h-16 items-center px-6 border-b border-border gap-2 font-semibold text-lg text-foreground",
-      content: "flex-1 overflow-y-auto p-4 flex flex-col gap-1.5",
-      footer: "p-4 border-t border-border flex items-center justify-between",
-      item: "relative",
-      itemLink:
-        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer",
-      itemIcon: "size-4 text-current",
-      itemBadge:
-        "ml-auto flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold"
-    },
-    variants: {
-      side: {
-        left: { root: "left-0 border-r" },
-        right: { root: "right-0 border-l" }
-      },
-      collapsible: {
-        icon: {
-          root: "w-16 [&_[data-slot=item-text]]:hidden [&_[data-slot=item-badge]]:hidden [&_[data-slot=sidebar-logo]]:hidden"
-        },
-        offcanvas: { root: "-translate-x-full" },
-        none: {}
-      }
-    },
-    defaultVariants: {
-      side: "left",
-      collapsible: "none"
-    }
-  })
-
-export default createSidebarTheme()

package/src/themes/skeleton.theme.ts

@@ -1,21 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSkeletonTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "animate-pulse bg-elevated shrink-0"
-    },
-    variants: {
-      shape: {
-        circle: { root: "rounded-full" },
-        rectangle: { root: "rounded-none" },
-        rounded: { root: "rounded-md" }
-      }
-    },
-    defaultVariants: {
-      shape: "rounded"
-    }
-  })
-
-export default createSkeletonTheme()

package/src/themes/slideover.theme.ts

@@ -1,59 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSlideoverTheme = (_colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "backdrop",
-      "content",
-      "header",
-      "title",
-      "description",
-      "footer",
-      "closeButton"
-    ],
-    base: {
-      root: "relative inline-block",
-      trigger: "",
-      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
-      content: [
-        "fixed z-50 bg-background p-6 shadow-xl border-border transition-all duration-300 outline-none",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out"
-      ],
-      header: "flex flex-col gap-1.5 mb-4",
-      title: "text-lg font-semibold leading-none tracking-tight text-foreground",
-      description: "text-sm text-muted-foreground leading-relaxed",
-      footer: "flex flex-col sm:flex-row sm:justify-end gap-2 mt-6",
-      closeButton: [
-        "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 text-foreground",
-        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-      ]
-    },
-    variants: {
-      side: {
-        top: {
-          content:
-            "inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
-        },
-        bottom: {
-          content:
-            "inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
-        },
-        left: {
-          content:
-            "inset-y-0 left-0 right-auto h-full w-2/3 max-w-sm border-r m-0 max-h-none data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
-        },
-        right: {
-          content:
-            "inset-y-0 right-0 left-auto h-full w-2/3 max-w-sm border-l m-0 max-h-none data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
-        }
-      }
-    },
-    defaultVariants: {
-      side: "left"
-    }
-  })
-
-export default createSlideoverTheme()

package/src/themes/slider.theme.ts

@@ -1,35 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSliderTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "track", "range", "thumb"],
-    base: {
-      root: "relative flex w-full touch-none select-none items-center",
-      track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted",
-      range: "absolute h-full",
-      thumb:
-        "block size-4.5 rounded-full border border-border bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            range: `bg-[var(--rl-bg)]`,
-            thumb: `focus-visible:ring-[var(--rl-ring)]/50 hover:border-[var(--rl-border)]`
-          }
-        ])
-      ),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  })
-
-export default createSliderTheme()

package/src/themes/speed-dial.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSpeedDialTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createSpeedDialTheme()

package/src/themes/spinner.theme.ts

@@ -1,33 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSpinnerTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent border-current"
-    },
-    variants: {
-      size: {
-        xs: { root: "size-3" },
-        sm: { root: "size-4" },
-        md: { root: "size-6" },
-        lg: { root: "size-8" },
-        xl: { root: "size-10" }
-      },
-      color: Object.fromEntries([
-        ["current", { root: "text-current" }],
-        ...colors.map((color) => [color, { root: "rl-color-" + color + " text-[var(--rl-text)]" }])
-      ]),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "current"
-    }
-  })
-
-export default createSpinnerTheme()

package/src/themes/splitter.theme.ts

@@ -1,23 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSplitterTheme = () =>
-  defineTheme({
-    slots: ["root", "panel", "handle"],
-    base: {
-      root: "flex w-full h-full",
-      panel: "overflow-auto transition-all",
-      handle:
-        "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
-    },
-    variants: {
-      direction: {
-        horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
-        vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
-      }
-    },
-    defaultVariants: {
-      direction: "horizontal"
-    }
-  })
-
-export default createSplitterTheme()

package/src/themes/spoiler.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSpoilerTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createSpoilerTheme()

package/src/themes/stepper.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createStepperTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createStepperTheme()

package/src/themes/steps.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createStepsTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "w-full"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createStepsTheme()

package/src/themes/sticky-surface.theme.ts

@@ -1,12 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createStickySurfaceTheme = (_colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "sticky top-0 self-start transition-all duration-300"
-    }
-  })
-
-export default createStickySurfaceTheme()

package/src/themes/switch.theme.ts

@@ -1,66 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSwitchTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "input", "track", "thumb", "label"],
-    base: {
-      root: "inline-flex items-center gap-2 cursor-pointer select-none",
-      input: "absolute opacity-0 size-0 pointer-events-none peer",
-      track: [
-        "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-      ],
-      thumb:
-        "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
-      label: "text-sm text-foreground leading-none"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      size: {
-        sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
-        md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
-        lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
-      },
-      checked: {
-        true: { thumb: "translate-x-full" },
-        false: { thumb: "translate-x-0" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      {
-        size: "sm",
-        checked: true,
-        classNames: { thumb: "translate-x-3" }
-      },
-      {
-        size: "md",
-        checked: true,
-        classNames: { thumb: "translate-x-4" }
-      },
-      {
-        size: "lg",
-        checked: true,
-        classNames: { thumb: "translate-x-5" }
-      }
-    ],
-    defaultVariants: {
-      color: "primary",
-      size: "md",
-      checked: false
-    }
-  })
-
-export default createSwitchTheme()

package/src/themes/table-of-contents.theme.ts

@@ -1,67 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createTableOfContentsTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "container",
-      "top",
-      "bottom",
-      "trigger",
-      "title",
-      "trailing",
-      "trailingIcon",
-      "content",
-      "list",
-      "listWithChildren",
-      "item",
-      "itemWithChildren",
-      "link",
-      "linkText",
-      "indicator",
-      "indicatorLine",
-      "indicatorActive"
-    ],
-    base: {
-      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 xl:mx-0 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-var(--ui-header-height))]",
-      container:
-        "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
-      top: "",
-      bottom: "hidden lg:flex lg:flex-col gap-6",
-      trigger:
-        "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
-      title: "truncate",
-      trailing: "ms-auto inline-flex gap-1.5 items-center",
-      trailingIcon:
-        "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
-      content:
-        "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
-      list: "min-w-0",
-      listWithChildren: "ms-3",
-      item: "min-w-0",
-      itemWithChildren: "",
-      link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
-      linkText: "truncate",
-      indicator: "",
-      indicatorLine: "",
-      indicatorActive: ""
-    },
-    variants: {
-      interactive: {
-        true: {
-          root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
-        },
-        false: { root: "" }
-      },
-      overlay: {
-        true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
-        false: { root: "" }
-      }
-    },
-    defaultVariants: {
-      interactive: false,
-      overlay: false
-    }
-  })
-
-export default createTableOfContentsTheme()

package/src/themes/table.theme.ts

@@ -1,36 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createTableTheme = () =>
-  defineTheme({
-    slots: ["root", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "caption"],
-    base: {
-      root: "relative w-full overflow-auto rounded-lg border border-border shadow-sm",
-      table: "w-full text-sm text-left border-collapse",
-      thead: "bg-muted/50 border-b border-border",
-      tbody: "divide-y divide-border",
-      tfoot: "bg-muted/30 border-t border-border font-medium",
-      tr: "transition-colors hover:bg-muted/30",
-      th: "p-4 text-xs font-semibold uppercase text-muted-foreground",
-      td: "p-4 text-foreground align-middle",
-      caption: "p-4 text-xs text-muted-foreground text-center"
-    },
-    variants: {
-      striped: {
-        true: { tr: "odd:bg-background even:bg-muted/20 hover:bg-muted/35" }
-      },
-      bordered: {
-        true: {
-          root: "border-2 border-border",
-          tr: "border-b border-border",
-          th: "border-r border-border last:border-r-0",
-          td: "border-r border-border last:border-r-0"
-        }
-      }
-    },
-    defaultVariants: {
-      striped: false,
-      bordered: false
-    }
-  })
-
-export default createTableTheme()