@rimelight/ui 0.0.31 → 0.0.33

package/src/themes/{dropdownMenu.theme.ts → dropdown-menu.theme.ts}

@@ -1,27 +1,29 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createDropdownMenuTheme = () =>
-  defineTheme({
-    slots: ["root", "trigger", "content", "item", "shortcut", "separator", "label"],
-    base: {
-      root: "relative inline-block text-left",
-      trigger: "inline-flex justify-center w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-      content: "absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none",
-      item: "group flex w-full items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50",
-      shortcut: "ml-auto text-xs tracking-widest opacity-60",
-      separator: "-mx-1 my-1 h-px bg-muted",
-      label: "px-2 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase"
-    },
-    variants: {
-      size: {
-        sm: { trigger: "px-3 py-1.5 text-xs", item: "px-2 py-1 text-xs" },
-        md: { trigger: "px-4 py-2 text-sm", item: "px-2 py-1.5 text-sm" },
-        lg: { trigger: "px-5 py-2.5 text-base", item: "px-3 py-2 text-base" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  })
-
-export default createDropdownMenuTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createDropdownMenuTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "content", "item", "shortcut", "separator", "label"],
+    base: {
+      root: "relative inline-block text-left",
+      trigger:
+        "inline-flex justify-center w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      content:
+        "absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none",
+      item: "group flex w-full items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50",
+      shortcut: "ml-auto text-xs tracking-widest opacity-60",
+      separator: "-mx-1 my-1 h-px bg-muted",
+      label: "px-2 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase"
+    },
+    variants: {
+      size: {
+        sm: { trigger: "px-3 py-1.5 text-xs", item: "px-2 py-1 text-xs" },
+        md: { trigger: "px-4 py-2 text-sm", item: "px-2 py-1.5 text-sm" },
+        lg: { trigger: "px-5 py-2.5 text-base", item: "px-3 py-2 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createDropdownMenuTheme()

package/src/themes/editor.theme.ts

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

package/src/themes/empty.theme.ts

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

package/src/themes/error.theme.ts

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

package/src/themes/{inputGroup.theme.ts → field-group.theme.ts}

@@ -1,23 +1,24 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createInputGroupTheme = () =>
-  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 createInputGroupTheme()
+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,13 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createFieldsetTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createFieldsetTheme()

package/src/themes/{dropzone.theme.ts → file-upload.theme.ts}

@@ -1,6 +1,6 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const createDropzoneTheme = () =>
+export const createFileUploadTheme = () =>
   defineTheme({
     slots: ["root", "input", "content", "icon", "title", "description"],
     base: {
@@ -21,4 +21,4 @@ export const createDropzoneTheme = () =>
     }
   })
 
-export default createDropzoneTheme()
+export default createFileUploadTheme()

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

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

package/src/themes/footer.theme.ts

@@ -1,27 +1,30 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root", "container", "left", "center", "right"],
-  base: {
-    root: "py-8 lg:py-12",
-    container:
-      "flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-4 md:px-6 lg:px-8",
-    left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:flex-none lg:items-start",
-    center: "flex flex-col items-center justify-start lg:order-2 lg:flex-1",
-    right:
-      "order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-none lg:items-end"
-  },
-  variants: {
-    contain: {
-      true: {
-        container: "mx-auto max-w-7xl"
-      },
-      false: {
-        container: "w-full"
-      }
-    }
-  },
-  defaultVariants: {
-    contain: false
-  }
-})
+import { defineTheme } from "../utils/defineTheme"
+
+export const createFooterTheme = () =>
+  defineTheme({
+    slots: ["root", "container", "left", "center", "right"],
+    base: {
+      root: "py-8 lg:py-12 overflow-hidden",
+      container:
+        "box-border flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-4 md:px-6 lg:px-8 w-full",
+      left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:flex-none lg:items-start",
+      center: "flex flex-col items-center justify-start lg:order-2 lg:flex-1",
+      right:
+        "order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-none lg:items-end"
+    },
+    variants: {
+      contain: {
+        true: {
+          container: "mx-auto max-w-7xl"
+        },
+        false: {
+          container: "w-full"
+        }
+      }
+    },
+    defaultVariants: {
+      contain: false
+    }
+  })
+
+export default createFooterTheme()

package/src/themes/{field.theme.ts → form-field.theme.ts}

@@ -1,6 +1,6 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const createFieldTheme = () =>
+export const createFormFieldTheme = () =>
   defineTheme({
     slots: ["root", "label", "description", "error"],
     base: {
@@ -21,4 +21,4 @@ export const createFieldTheme = () =>
     }
   })
 
-export default createFieldTheme()
+export default createFormFieldTheme()

package/src/themes/form.theme.ts

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

package/src/themes/gallery.theme.ts

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

package/src/themes/head.theme.ts

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

package/src/themes/header.theme.ts

@@ -1,43 +1,46 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root", "content", "container", "left", "center", "right"],
-  base: {
-    root: "w-full",
-    content: "w-full",
-    container:
-      "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-4 md:px-6 lg:px-8",
-    left: "flex flex-none items-center justify-start",
-    center: "flex items-center justify-center",
-    right: "flex flex-none items-center justify-end"
-  },
-  variants: {
-    contain: {
-      true: {
-        container: "mx-auto max-w-7xl"
-      },
-      false: {
-        container: "max-w-none"
-      }
-    },
-    sticky: {
-      true: {
-        root: "sticky top-0 inset-x-0 z-50"
-      },
-      false: {
-        root: "relative"
-      }
-    },
-    fixed: {
-      true: {
-        root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
-      },
-      false: {}
-    }
-  },
-  defaultVariants: {
-    contain: true,
-    sticky: true,
-    fixed: false
-  }
-})
+import { defineTheme } from "../utils/defineTheme"
+
+export const createHeaderTheme = () =>
+  defineTheme({
+    slots: ["root", "content", "container", "left", "center", "right"],
+    base: {
+      root: "w-full",
+      content: "w-full",
+      container:
+        "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-4 md:px-6 lg:px-8",
+      left: "flex flex-none items-center justify-start",
+      center: "flex items-center justify-center",
+      right: "flex flex-none items-center justify-end"
+    },
+    variants: {
+      contain: {
+        true: {
+          container: "mx-auto max-w-7xl"
+        },
+        false: {
+          container: "max-w-none"
+        }
+      },
+      sticky: {
+        true: {
+          root: "sticky top-0 inset-x-0 z-50"
+        },
+        false: {
+          root: ""
+        }
+      },
+      fixed: {
+        true: {
+          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
+        },
+        false: {}
+      }
+    },
+    defaultVariants: {
+      contain: true,
+      sticky: true,
+      fixed: false
+    }
+  })
+
+export default createHeaderTheme()

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

@@ -0,0 +1,29 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createHoverCardTheme = (colors: string[] = defaultColors) =>
+  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 createHoverCardTheme()

package/src/themes/icon.theme.ts

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

@@ -0,0 +1,19 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createImageTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "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",
+      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/input-date.theme.ts

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

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

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

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