@rimelight/ui 0.0.32 → 0.0.34

package/src/themes/dashboard-sidebar-collapse.theme.ts

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

package/src/themes/dashboard-sidebar-toggle.theme.ts

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

package/src/themes/dashboard-sidebar.theme.ts

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

package/src/themes/dashboard-toolbar.theme.ts

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

package/src/themes/dock.theme.ts

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

package/src/themes/drawer.theme.ts

@@ -1,44 +1,61 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const drawerTheme = defineTheme({
-  slots: ["root", "trigger", "backdrop", "content", "handle", "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"
+export const createDrawerTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "backdrop",
+      "content",
+      "handle",
+      "header",
+      "title",
+      "description",
+      "footer",
+      "closeButton"
     ],
-    handle: "mx-auto h-1.5 w-[100px] rounded-full bg-muted mb-4",
-    header: "flex flex-col gap-1.5 mb-4 text-center",
-    title: "text-lg font-semibold leading-none tracking-tight text-foreground",
-    description: "text-sm text-muted-foreground leading-relaxed",
-    footer: "flex flex-col 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: {
-    direction: {
-      top: {
-        content: "inset-x-0 top-0 border-b rounded-b-xl data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
-      },
-      bottom: {
-        content: "inset-x-0 bottom-0 border-t rounded-t-xl data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
-      },
-      left: {
-        content: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r rounded-r-xl data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
-      },
-      right: {
-        content: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l rounded-l-xl data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+    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"
+      ],
+      handle: "mx-auto h-1.5 w-[100px] rounded-full bg-muted mb-4",
+      header: "flex flex-col gap-1.5 mb-4 text-center",
+      title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+      description: "text-sm text-muted-foreground leading-relaxed",
+      footer: "flex flex-col 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: {
+      direction: {
+        top: {
+          content:
+            "inset-x-0 top-0 border-b rounded-b-xl data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
+        },
+        bottom: {
+          content:
+            "inset-x-0 bottom-0 border-t rounded-t-xl data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+        },
+        left: {
+          content:
+            "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r rounded-r-xl data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
+        },
+        right: {
+          content:
+            "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l rounded-l-xl data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+        }
       }
+    },
+    defaultVariants: {
+      direction: "bottom"
     }
-  },
-  defaultVariants: {
-    direction: "bottom"
-  }
-})
+  })
 
-export default drawerTheme
+export default createDrawerTheme()

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

@@ -5,8 +5,10 @@ export const createDropdownMenuTheme = () =>
     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",
+      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",

package/src/themes/editor.theme.ts

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

package/src/themes/empty.theme.ts

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

package/src/themes/error.theme.ts

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

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

@@ -5,7 +5,8 @@ export const createFieldGroupTheme = () =>
     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",
+      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: {

package/src/themes/fieldset.theme.ts

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

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

@@ -1,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+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"
+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
     }
-  },
-  defaultVariants: {
-    contain: false
-  }
-})
+  })
+
+export default createFooterTheme()

package/src/themes/form.theme.ts

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

package/src/themes/gallery.theme.ts

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

package/src/themes/head.theme.ts

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

package/src/themes/header.theme.ts

@@ -1,43 +1,45 @@
 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"
+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-1 min-w-0 flex items-center justify-start truncate",
+      center: "flex-none flex items-center justify-center mx-4",
+      right: "flex-1 min-w-0 flex items-center justify-end truncate"    },
+    variants: {
+      contain: {
+        true: {
+          container: "mx-auto max-w-7xl"
+        },
+        false: {
+          container: "max-w-none"
+        }
       },
-      false: {
-        container: "max-w-none"
-      }
-    },
-    sticky: {
-      true: {
-        root: "sticky top-0 inset-x-0 z-50"
+      sticky: {
+        true: {
+          root: "sticky top-0 inset-x-0 z-50"
+        },
+        false: {
+          root: ""
+        }
       },
-      false: {
-        root: "relative"
+      fixed: {
+        true: {
+          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
+        },
+        false: {}
       }
     },
-    fixed: {
-      true: {
-        root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
-      },
-      false: {}
+    defaultVariants: {
+      contain: true,
+      sticky: true,
+      fixed: false
     }
-  },
-  defaultVariants: {
-    contain: true,
-    sticky: true,
-    fixed: false
-  }
-})
+  })
+
+export default createHeaderTheme()

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

@@ -1,27 +1,29 @@
+import { defaultColors } from "../presets/defaults"
 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" }
+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"
     }
-  },
-  defaultVariants: {
-    placement: "bottom"
-  }
-})
+  })
 
-export default hoverCardTheme
+export default createHoverCardTheme()