@rimelight/ui 0.0.33 → 0.0.35

package/src/themes/footer.theme.ts

@@ -1,30 +1,30 @@
-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()
+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-xs sm:px-md md:px-xl lg:px-xl 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-(--rl-container)"
+        },
+        false: {
+          container: "w-full"
+        }
+      }
+    },
+    defaultVariants: {
+      contain: false
+    }
+  })
+
+export default createFooterTheme()

package/src/themes/form.theme.ts

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

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

package/src/themes/grid.theme.ts

@@ -0,0 +1,38 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createGridTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "grid w-full [&>*]:mt-0!"
+    },
+    variants: {
+      cols: {
+        1: { root: "grid-cols-1" },
+        2: { root: "grid-cols-1 sm:grid-cols-2" },
+        3: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3" },
+        4: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" },
+        5: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5" },
+        6: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6" }
+      },
+      gap: {
+        none: { root: "gap-0" },
+        xs: { root: "gap-1 sm:gap-2" },
+        sm: { root: "gap-2 sm:gap-4" },
+        md: { root: "gap-4 sm:gap-6" },
+        lg: { root: "gap-6 sm:gap-8" },
+        xl: { root: "gap-8 sm:gap-12" }
+      },
+      stagger: {
+        true: { root: "pb-20 [&>:nth-child(2n)]:translate-y-20" },
+        false: { root: "" }
+      }
+    },
+    defaultVariants: {
+      cols: 2,
+      gap: "md",
+      stagger: false
+    }
+  })
+
+export default createGridTheme()

package/src/themes/head.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createHeadTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createHeadTheme()
+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,46 +1,46 @@
-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()
+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-xs sm:px-md md:px-xl lg:px-xl",
+      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-90rem"
+        },
+        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

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createHoverCardTheme = (colors: string[] = defaultColors) =>
+export const createHoverCardTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "trigger", "content"],
     base: {

package/src/themes/icon.theme.ts

@@ -1,23 +1,23 @@
-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()
+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,19 +1,33 @@
-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()
+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/input-date.theme.ts

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