@rimelight/ui 0.0.30 → 0.0.32

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

@@ -0,0 +1,23 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createFieldGroupTheme = () =>
+  defineTheme({
+    slots: ["root", "prepend", "append"],
+    base: {
+      root: "relative flex items-stretch w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 overflow-hidden",
+      prepend: "flex items-center bg-muted px-3 text-sm text-muted-foreground border-r border-input",
+      append: "flex items-center bg-muted px-3 text-sm text-muted-foreground border-l border-input"
+    },
+    variants: {
+      size: {
+        sm: { prepend: "px-2 text-xs", append: "px-2 text-xs" },
+        md: { prepend: "px-3 text-sm", append: "px-3 text-sm" },
+        lg: { prepend: "px-4 text-base", append: "px-4 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createFieldGroupTheme()

package/src/themes/fieldset.theme.ts

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

package/src/themes/file-upload.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createFileUploadTheme = () =>
+  defineTheme({
+    slots: ["root", "input", "content", "icon", "title", "description"],
+    base: {
+      root: "flex flex-col items-center justify-center w-full min-h-[150px] border-2 border-dashed border-border rounded-lg bg-background/50 hover:bg-muted/30 transition-colors cursor-pointer select-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      input: "absolute opacity-0 size-0 pointer-events-none",
+      content: "flex flex-col items-center justify-center p-6 text-center gap-1.5",
+      icon: "size-8 text-muted-foreground",
+      title: "text-sm font-semibold text-foreground",
+      description: "text-xs text-muted-foreground"
+    },
+    variants: {
+      disabled: {
+        true: { root: "opacity-50 cursor-not-allowed pointer-events-none" }
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  })
+
+export default createFileUploadTheme()

package/src/themes/floating-action.theme.ts

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

package/src/themes/form-field.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createFormFieldTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "description", "error"],
+    base: {
+      root: "flex flex-col gap-1.5 w-full",
+      label: "text-sm font-medium text-foreground",
+      description: "text-xs text-muted-foreground leading-normal",
+      error: "text-xs font-medium text-error-500 leading-normal"
+    },
+    variants: {
+      size: {
+        sm: { label: "text-xs", description: "text-[10px]", error: "text-[10px]" },
+        md: { label: "text-sm", description: "text-xs", error: "text-xs" },
+        lg: { label: "text-base", description: "text-sm", error: "text-sm" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createFormFieldTheme()

package/src/themes/form.theme.ts

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

package/src/themes/gallery.theme.ts

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

package/src/themes/head.theme.ts

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

package/src/themes/hover-card.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const hoverCardTheme = defineTheme({
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block group/hover-card",
+    trigger: "",
+    content: [
+      "absolute z-50 w-80 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-md outline-none",
+      "transition-all duration-200 invisible opacity-0 scale-95 origin-center pointer-events-none",
+      "group-hover/hover-card:visible group-hover/hover-card:opacity-100 group-hover/hover-card:scale-100 group-hover/hover-card:pointer-events-auto"
+    ]
+  },
+  variants: {
+    placement: {
+      top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
+      bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+      left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
+      right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
+    }
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+})
+
+export default hoverCardTheme

package/src/themes/image.theme.ts

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

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

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

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

@@ -0,0 +1,28 @@
+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

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

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

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

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

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

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

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

package/src/themes/input.theme.ts

@@ -0,0 +1,41 @@
+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: {
+      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: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasLeading: false,
+      hasTrailing: false,
+      error: false
+    }
+  })
+
+export default createInputTheme()

package/src/themes/kbd.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const kbdTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: [
+      "inline-flex items-center justify-center font-sans font-medium select-none pointer-events-none rounded border border-border bg-muted",
+      "shadow-[0_1px_0px_0px_rgba(0,0,0,0.1)] dark:shadow-[0_1px_0px_0px_rgba(255,255,255,0.05)]",
+      "text-muted-foreground"
+    ]
+  },
+  variants: {
+    size: {
+      sm: { root: "h-5 min-w-[20px] px-1 text-3xs" },
+      md: { root: "h-6 min-w-[24px] px-1.5 text-2xs" },
+      lg: { root: "h-7 min-w-[28px] px-2 text-xs" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})
+
+export default kbdTheme

package/src/themes/knob.theme.ts

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

package/src/themes/label.theme.ts

@@ -0,0 +1,20 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const labelTheme = 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 labelTheme

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

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

package/src/themes/link.theme.ts

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

package/src/themes/listbox.theme.ts

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

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

@@ -0,0 +1,50 @@
+import { defineTheme } from "../utils/defineTheme"
+export default 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 w-full",
+        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"
+    }
+})

package/src/themes/marquee.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const marqueeTheme = 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 marqueeTheme

package/src/themes/megamenu.theme.ts

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

package/src/themes/meter.theme.ts

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

package/src/themes/modal.theme.ts

@@ -0,0 +1,37 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const modalTheme = 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 modalTheme

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

@@ -0,0 +1,19 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createNavigationMenuTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "item", "link", "trigger", "content", "viewport"],
+    base: {
+      root: "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      list: "group flex flex-1 list-none items-center justify-center space-x-1",
+      item: "relative",
+      link: "group inline-flex h-10 w-max items-center justify-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",
+      trigger: "group inline-flex h-10 w-max items-center justify-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",
+      viewport: "absolute left-0 top-full flex justify-center w-full"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createNavigationMenuTheme()

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

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

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

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

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

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

package/src/themes/{section.theme.ts → page-section.theme.ts}

@@ -181,7 +181,6 @@ export default defineTheme({
   ],
   defaultVariants: {
     variant: "default",
-    orientation: "vertical",
-    ctaVariant: "solid"
+    orientation: "vertical"
   }
 })

package/src/themes/page.theme.ts

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

package/src/themes/pagination.theme.ts

@@ -0,0 +1,26 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const paginationTheme = defineTheme({
+  slots: ["root", "list", "item", "link", "ellipsis"],
+  base: {
+    root: "mx-auto flex w-full justify-center",
+    list: "flex flex-row items-center gap-1",
+    item: "",
+    link: [
+      "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all size-9 cursor-pointer border border-border bg-background hover:bg-muted text-foreground decoration-none",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+    ],
+    ellipsis: "flex size-9 items-center justify-center text-muted-foreground"
+  },
+  variants: {
+    active: {
+      true: { link: "border-primary bg-primary text-primary-foreground hover:bg-primary/95" },
+      false: { link: "" }
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+})
+
+export default paginationTheme

package/src/themes/password.theme.ts

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