@rimelight/ui 0.0.37 → 0.0.39

package/src/themes/icon.theme.ts

@@ -1,23 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createIconTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ["inline-block", "align-middle"]
-    },
-    variants: {
-      size: {
-        xs: { root: ["h-3", "w-3"] },
-        sm: { root: ["h-4", "w-4"] },
-        md: { root: ["h-5", "w-5"] },
-        lg: { root: ["h-6", "w-6"] },
-        xl: { root: ["h-8", "w-8"] }
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  })
-
-export default createIconTheme()

package/src/themes/image.theme.ts

@@ -1,33 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createImageTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "triggerImage",
-      "dialog",
-      "image",
-      "fileInfo",
-      "download",
-      "closeButton"
-    ],
-    base: {
-      root: "relative inline-block group/image",
-      trigger:
-        "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
-      triggerImage: "",
-      dialog:
-        "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
-      image: "object-contain max-w-full max-h-[65vh] rounded-lg",
-      fileInfo: "flex items-center justify-between gap-xl px-4 pb-4 shrink-0",
-      download:
-        "inline-flex items-center justify-center rounded-md font-medium transition-colors outline-none h-9 px-4 py-2 text-sm gap-2 text-primary-500 hover:bg-primary-500/10 active:bg-primary-500/10",
-      closeButton:
-        "inline-flex items-center justify-center size-8 rounded-full bg-background/80 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createImageTheme()

package/src/themes/index.ts

@@ -1,18 +0,0 @@
-import type { ComponentTheme } from "../utils/defineTheme"
-
-const themeModules = import.meta.glob<{ default: ComponentTheme }>("./*.theme.ts", { eager: true })
-
-function kebabToCamel(str: string): string {
-  return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase())
-}
-
-function themeNameFromFile(path: string): string {
-  const fileName = path.replace(/^\.\/|\.theme\.ts$/g, "")
-  return kebabToCamel(fileName)
-}
-
-export const defaultUIConfig: Record<string, ComponentTheme> = Object.fromEntries(
-  Object.entries(themeModules).map(([path, module]) => [themeNameFromFile(path), module.default])
-)
-
-export type DefaultUIConfig = typeof defaultUIConfig

package/src/themes/input-date.theme.ts

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

package/src/themes/input-menu.theme.ts

@@ -1,35 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createInputMenuTheme = () =>
-  defineTheme({
-    slots: ["root", "label", "trigger", "input", "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",
-      input:
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-all placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      content:
-        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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", input: "h-8 text-xs", item: "py-1 px-1.5 text-xs" },
-        md: { trigger: "h-9 px-3 text-sm", input: "h-9 text-sm", item: "py-1.5 px-2 text-sm" },
-        lg: {
-          trigger: "h-10 px-4 text-base",
-          input: "h-10 text-base",
-          item: "py-2 px-2.5 text-base"
-        }
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  })
-
-export default createInputMenuTheme()

package/src/themes/input-number.theme.ts

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

package/src/themes/input-tags.theme.ts

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

package/src/themes/input-time.theme.ts

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

package/src/themes/input.theme.ts

@@ -1,48 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createInputTheme = () =>
-  defineTheme({
-    slots: ["root", "input", "leading", "trailing"],
-    base: {
-      root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-      input:
-        "w-full bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-      leading: "absolute left-3 flex items-center justify-center text-muted-foreground",
-      trailing: "absolute right-3 flex items-center justify-center text-muted-foreground"
-    },
-    variants: {
-      variant: {
-        default: {},
-        ghost: {
-          root: "bg-transparent border-none shadow-none focus-within:ring-0"
-        }
-      },
-      size: {
-        sm: { input: "py-1 text-xs", leading: "left-2.5", trailing: "right-2.5" },
-        md: { input: "py-1.5 text-sm", leading: "left-3", trailing: "right-3" },
-        lg: { input: "py-2 text-base", leading: "left-3.5", trailing: "right-3.5" }
-      },
-      hasLeading: {
-        true: { input: "pl-9" }
-      },
-      hasTrailing: {
-        true: { input: "pr-9" }
-      },
-      error: {
-        true: { root: "border-error-500 focus-within:ring-error-500/50" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-      hasLeading: false,
-      hasTrailing: false,
-      error: false
-    }
-  })
-
-export default createInputTheme()

package/src/themes/kbd.theme.ts

@@ -1,94 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createKbdTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-        neutral: { root: "" }
-      } as Record<string, { root: string }>,
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      size: {
-        sm: { root: "h-4 min-w-[16px] text-[10px]" },
-        md: { root: "h-5 min-w-[20px] text-[11px]" },
-        lg: { root: "h-6 min-w-[24px] text-[12px]" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] bg-[var(--rl-bg)]/10"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: { root: "text-inverted bg-inverted" }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: { root: "ring ring-inset ring-accented text-default bg-default" }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: { root: "text-default bg-elevated" }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: { root: "ring ring-inset ring-accented text-default bg-elevated" }
-      }
-    ],
-    defaultVariants: {
-      variant: "outline",
-      color: "neutral",
-      size: "md"
-    }
-  })
-
-export default createKbdTheme()

package/src/themes/knob.theme.ts

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

package/src/themes/label.theme.ts

@@ -1,22 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createLabelTheme = (_colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-    },
-    variants: {
-      size: {
-        sm: { root: "text-xs" },
-        md: { root: "text-sm" },
-        lg: { root: "text-base" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  })
-
-export default createLabelTheme()

package/src/themes/layout-grid.theme.ts

@@ -1,16 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createLayoutGridTheme = () =>
-  defineTheme({
-    slots: ["root", "overlay", "container", "columns"],
-    base: {
-      root: "",
-      overlay: "fixed top-0 left-0 w-full h-full pointer-events-none",
-      container: "h-full mx-auto",
-      columns: "grid h-full"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createLayoutGridTheme()

package/src/themes/link-group.theme.ts

@@ -1,28 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createLinkGroupTheme = () =>
-  defineTheme({
-    slots: ["root", "title", "list", "item", "link"],
-    base: {
-      root: "flex flex-col gap-4",
-      title: "font-bold text-sm uppercase tracking-wider text-neutral-500",
-      list: "flex flex-col gap-2",
-      item: "",
-      link: "text-sm text-muted-foreground hover:text-accent-foreground transition-colors"
-    },
-    variants: {
-      theme: {
-        dark: {
-          link: "text-white hover:text-accent-foreground",
-          title: "text-white"
-        },
-        light: {
-          link: "text-foreground hover:text-accent-foreground",
-          title: "text-foreground"
-        }
-      }
-    },
-    defaultVariants: {}
-  })
-
-export default createLinkGroupTheme()

package/src/themes/link.theme.ts

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

package/src/themes/listbox.theme.ts

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

package/src/themes/locale-selector.theme.ts

@@ -1,49 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-export const createLocaleSelectorTheme = () =>
-  defineTheme({
-    slots: ["root", "label", "wrapper", "select", "option", "iconWrapper"],
-    base: {
-      root: "inline-flex flex-col gap-1.5",
-      label: "text-xs font-semibold text-muted select-none",
-      wrapper: "relative inline-block",
-      select:
-        "w-full appearance-none font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-emerald-500/40 cursor-pointer pr-10",
-      option: "bg-neutral-900 text-white selection:bg-neutral-800",
-      iconWrapper:
-        "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-current group-hover:text-default"
-    },
-    variants: {
-      variant: {
-        default: {
-          select: "bg-gray-100 text-gray-800 hover:bg-gray-200 border border-transparent"
-        },
-        outline: {
-          select:
-            "bg-transparent border border-neutral-800 text-white hover:bg-neutral-900 hover:border-neutral-700"
-        },
-        ghost: {
-          select: "bg-transparent border border-transparent text-white hover:bg-neutral-900"
-        }
-      },
-      size: {
-        sm: {
-          label: "text-xxs",
-          select: "text-xs px-3 py-1.5 pr-8"
-        },
-        md: {
-          label: "text-xs",
-          select: "text-sm px-4 py-2 pr-9"
-        },
-        lg: {
-          label: "text-sm",
-          select: "text-base px-5 py-2.5 pr-10"
-        }
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
-    }
-  })
-
-export default createLocaleSelectorTheme()

package/src/themes/logo.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createLogoTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createLogoTheme()

package/src/themes/main.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createMainTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "min-h-[calc(100vh-var(--ui-header-height))]"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createMainTheme()

package/src/themes/marquee.theme.ts

@@ -1,29 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createMarqueeTheme = (_colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "track"],
-    base: {
-      root: "relative w-full overflow-hidden flex gap-4 mask-gradient-to-r",
-      track: "flex shrink-0 gap-4 min-w-full justify-around animate-marquee"
-    },
-    variants: {
-      direction: {
-        left: { track: "flex-row animate-marquee-left" },
-        right: { track: "flex-row animate-marquee-right" },
-        up: { root: "flex-col h-80", track: "flex-col animate-marquee-up" },
-        down: { root: "flex-col h-80", track: "flex-col animate-marquee-down" }
-      },
-      pauseOnHover: {
-        true: { track: "hover:[animation-play-state:paused]" },
-        false: { track: "" }
-      }
-    },
-    defaultVariants: {
-      direction: "left",
-      pauseOnHover: true
-    }
-  })
-
-export default createMarqueeTheme()

package/src/themes/meter.theme.ts

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

package/src/themes/modal.theme.ts

@@ -1,49 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createModalTheme = (_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 left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
-        "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
-      ],
-      header: "flex flex-col gap-1.5 text-center sm:text-left 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-reverse 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",
-        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-      ]
-    },
-    variants: {
-      size: {
-        sm: { content: "max-w-sm" },
-        md: { content: "max-w-lg" },
-        lg: { content: "max-w-2xl" },
-        xl: { content: "max-w-4xl" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  })
-
-export default createModalTheme()

package/src/themes/navigation-menu.theme.ts

@@ -1,44 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createNavigationMenuTheme = () =>
-  defineTheme({
-    slots: ["root", "list", "item", "link", "trigger", "content", "viewport", "viewportWrapper"],
-    base: {
-      root: "relative z-10 flex w-full",
-      list: "group flex flex-1 list-none",
-      item: "relative",
-      link: "text-foreground inline-flex items-center px-4 py-2 text-sm font-medium transition-colors hover:text-accent-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
-      trigger:
-        "group inline-flex h-10 items-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
-      content:
-        "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md origin-top-left",
-      viewportWrapper: "absolute left-0 top-full flex justify-center w-full",
-      viewport:
-        "relative mt-1.5 h-auto w-full origin-[top_center] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
-    },
-    variants: {
-      theme: {
-        light: { link: "rl-light", trigger: "rl-light" },
-        dark: { link: "rl-dark", trigger: "rl-dark" }
-      },
-      orientation: {
-        horizontal: {
-          root: "max-w-max flex-1 items-center justify-center",
-          list: "items-center justify-center space-x-1",
-          link: "justify-center w-max",
-          trigger: "w-max"
-        },
-        vertical: {
-          root: "flex-col w-full items-stretch justify-start",
-          list: "flex-col flex-1 items-stretch justify-start space-y-2 w-full",
-          link: "justify-start w-full px-4 py-2 text-lg",
-          trigger: "justify-start w-full h-10 px-4 py-2 text-lg"
-        }
-      }
-    },
-    defaultVariants: {
-      orientation: "horizontal"
-    }
-  })
-
-export default createNavigationMenuTheme()

package/src/themes/page-aside.theme.ts

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