@rimelight/ui 0.0.32 → 0.0.33

package/src/themes/posts.theme.ts

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

package/src/themes/pricing-plan.theme.ts

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

package/src/themes/pricing-table.theme.ts

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

package/src/themes/progress.theme.ts

@@ -1,37 +1,38 @@
-import { defineTheme } from "../utils/defineTheme"
-
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
-export const createProgressTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "indicator"],
-    base: {
-      root: "relative w-full overflow-hidden rounded-full bg-muted shadow-inner",
-      indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out"
-    },
-    variants: {
-      color: Object.fromEntries(colors.map((color) => [
-        color,
-        {
-          root: `rl-color-${color}`,
-          indicator: `bg-[var(--rl-bg)]`
-        }
-      ])),
-      size: {
-        sm: { root: "h-1.5" },
-        md: { root: "h-3" },
-        lg: { root: "h-5" }
-      },
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary",
-      size: "md"
-    }
-  })
-
-export default createProgressTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createProgressTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "indicator"],
+    base: {
+      root: "relative w-full overflow-hidden rounded-full bg-muted shadow-inner",
+      indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            indicator: `bg-[var(--rl-bg)]`
+          }
+        ])
+      ),
+      size: {
+        sm: { root: "h-1.5" },
+        md: { root: "h-3" },
+        lg: { root: "h-5" }
+      },
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  })
+
+export default createProgressTheme()

package/src/themes/prose.theme.ts

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

package/src/themes/qr-code.theme.ts

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

package/src/themes/quote.theme.ts

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

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

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

package/src/themes/rating.theme.ts

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

package/src/themes/scroll-area.theme.ts

@@ -1,24 +1,26 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createScrollAreaTheme = () =>
-  defineTheme({
-    slots: ["root", "viewport", "scrollbar", "thumb"],
-    base: {
-      root: "relative overflow-hidden w-full",
-      viewport: "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-      scrollbar: "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
-      thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted-foreground/45"
-    },
-    variants: {
-      orientation: {
-        vertical: { scrollbar: "right-0 top-0 bottom-0 w-2.5 flex-col" },
-        horizontal: { scrollbar: "bottom-0 left-0 right-0 h-2.5 flex-row" },
-        both: { scrollbar: "" }
-      }
-    },
-    defaultVariants: {
-      orientation: "vertical"
-    }
-  })
-
-export default createScrollAreaTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createScrollAreaTheme = () =>
+  defineTheme({
+    slots: ["root", "viewport", "scrollbar", "thumb"],
+    base: {
+      root: "relative overflow-hidden w-full",
+      viewport:
+        "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+      scrollbar:
+        "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
+      thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted-foreground/45"
+    },
+    variants: {
+      orientation: {
+        vertical: { scrollbar: "right-0 top-0 bottom-0 w-2.5 flex-col" },
+        horizontal: { scrollbar: "bottom-0 left-0 right-0 h-2.5 flex-row" },
+        both: { scrollbar: "" }
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  })
+
+export default createScrollAreaTheme()

package/src/themes/scroll-to-top.theme.ts

@@ -1,50 +1,52 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createScrollToTopTheme = (colors: string[] = ["primary", "secondary"]) =>
-  defineTheme({
-    slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
-    base: {
-      root: "fixed bottom-6 right-6 z-50",
-      button: "size-14 lg:size-12 p-0 rounded-full",
-      progressBase: "progress-circle-base size-full",
-      svg: "size-full",
-      iconContainer: "absolute inset-0 flex items-center justify-center text-center",
-      icon: "size-6 text-white"
-    },
-    variants: {
-      color: Object.fromEntries(colors.map((color) => [
-        color,
-        {
-          root: `rl-color-${color}`,
-          progressBase: "",
-          svg: "",
-          iconContainer: "",
-          icon: ""
-        }
-      ])),
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      {
-        color: "primary",
-        classNames: {
-          icon: "text-primary-foreground"
-        }
-      },
-      {
-        color: "secondary",
-        classNames: {
-          icon: "text-secondary-foreground"
-        }
-      }
-    ],
-    defaultVariants: {
-      color: "primary"
-    }
-  })
-
-export default createScrollToTopTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createScrollToTopTheme = (colors: string[] = ["primary", "secondary"]) =>
+  defineTheme({
+    slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
+    base: {
+      root: "fixed bottom-6 right-6 z-50",
+      button: "size-14 lg:size-12 p-0 rounded-full",
+      progressBase: "progress-circle-base size-full",
+      svg: "size-full",
+      iconContainer: "absolute inset-0 flex items-center justify-center text-center",
+      icon: "size-6 text-white"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            progressBase: "",
+            svg: "",
+            iconContainer: "",
+            icon: ""
+          }
+        ])
+      ),
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      {
+        color: "primary",
+        classNames: {
+          icon: "text-primary-foreground"
+        }
+      },
+      {
+        color: "secondary",
+        classNames: {
+          icon: "text-secondary-foreground"
+        }
+      }
+    ],
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createScrollToTopTheme()

package/src/themes/select.theme.ts

@@ -1,27 +1,29 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSelectTheme = () =>
-  defineTheme({
-    slots: ["root", "label", "trigger", "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",
-      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", item: "py-1 px-1.5 text-xs" },
-        md: { trigger: "h-9 px-3 text-sm", item: "py-1.5 px-2 text-sm" },
-        lg: { trigger: "h-10 px-4 text-base", item: "py-2 px-2.5 text-base" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  })
-
-export default createSelectTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSelectTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "trigger", "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",
+      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", item: "py-1 px-1.5 text-xs" },
+        md: { trigger: "h-9 px-3 text-sm", item: "py-1.5 px-2 text-sm" },
+        lg: { trigger: "h-10 px-4 text-base", item: "py-2 px-2.5 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createSelectTheme()

package/src/themes/separator.theme.ts

@@ -1,19 +1,147 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const separatorTheme = defineTheme({
-  slots: ["root"],
-  base: {
-    root: "shrink-0 bg-border"
-  },
-  variants: {
-    orientation: {
-      horizontal: { root: "h-[1px] w-full" },
-      vertical: { root: "h-full w-[1px]" }
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal"
-  }
-})
-
-export default separatorTheme
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSeparatorTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
+    base: {
+      root: "flex items-center align-center text-center",
+      border: "",
+      container: "font-medium text-default flex",
+      icon: "shrink-0 size-5",
+      avatar: "shrink-0",
+      avatarSize: "2xs",
+      label: "text-sm"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { border: `border-${color}` }])),
+        neutral: { border: "border-default" }
+      },
+      orientation: {
+        horizontal: {
+          root: "w-full flex-row",
+          border: "w-full",
+          container: "whitespace-nowrap"
+        },
+        vertical: {
+          root: "h-full flex-col",
+          border: "h-full",
+          container: ""
+        }
+      },
+      size: {
+        xs: {},
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {}
+      },
+      position: {
+        start: {},
+        center: {},
+        end: {}
+      },
+      type: {
+        solid: {
+          border: "border-solid"
+        },
+        dashed: {
+          border: "border-dashed"
+        },
+        dotted: {
+          border: "border-dotted"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        position: "start",
+        classNames: { container: "me-3" }
+      },
+      {
+        orientation: "horizontal",
+        position: "center",
+        classNames: { container: "mx-3" }
+      },
+      {
+        orientation: "horizontal",
+        position: "end",
+        classNames: { container: "ms-3" }
+      },
+      {
+        orientation: "vertical",
+        position: "start",
+        classNames: { container: "mb-2" }
+      },
+      {
+        orientation: "vertical",
+        position: "center",
+        classNames: { container: "my-2" }
+      },
+      {
+        orientation: "vertical",
+        position: "end",
+        classNames: { container: "mt-2" }
+      },
+      {
+        orientation: "horizontal",
+        size: "xs",
+        classNames: { border: "border-t" }
+      },
+      {
+        orientation: "horizontal",
+        size: "sm",
+        classNames: { border: "border-t-[2px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "md",
+        classNames: { border: "border-t-[3px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "lg",
+        classNames: { border: "border-t-[4px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "xl",
+        classNames: { border: "border-t-[5px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "xs",
+        classNames: { border: "border-s" }
+      },
+      {
+        orientation: "vertical",
+        size: "sm",
+        classNames: { border: "border-s-[2px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "md",
+        classNames: { border: "border-s-[3px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "lg",
+        classNames: { border: "border-s-[4px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "xl",
+        classNames: { border: "border-s-[5px]" }
+      }
+    ],
+    defaultVariants: {
+      color: "neutral",
+      size: "xs",
+      type: "solid",
+      orientation: "horizontal"
+    }
+  })
+
+export default createSeparatorTheme()