@rimelight/ui 0.0.32 → 0.0.34

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

@@ -1,186 +1,187 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: [
-    "root",
-    "background",
-    "container",
-    "wrapper",
-    "header",
-    "leading",
-    "leadingIcon",
-    "headline",
-    "title",
-    "description",
-    "body",
-    "footer",
-    "links"
-  ],
-  base: {
-    root: "relative isolate",
-    background: "absolute inset-0 -z-1 overflow-hidden",
-    container: "mx-auto w-full max-w-90rem px-md flex flex-col lg:grid",
-    wrapper: "",
-    header: "",
-    leading: "flex items-center mb-6",
-    leadingIcon: "size-10 shrink-0 text-primary",
-    headline: "",
-    title: "text-pretty tracking-tight font-bold text-highlighted",
-    description: "text-muted",
-    body: "",
-    footer: "",
-    links: "flex flex-wrap"
-  },
-  variants: {
-    variant: {
-      default: {
-        container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
-        headline: "mb-3",
-        title: "text-3xl sm:text-4xl lg:text-5xl",
-        description: "text-base sm:text-lg",
-        body: "mt-8",
-        footer: "mt-8",
-        links: "gap-x-6 gap-y-3"
+export const createPageSectionTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "background",
+      "container",
+      "wrapper",
+      "header",
+      "leading",
+      "leadingIcon",
+      "headline",
+      "title",
+      "description",
+      "body",
+      "footer",
+      "links"
+    ],
+    base: {
+      root: "relative isolate",
+      background: "absolute inset-0 -z-1 overflow-hidden",
+      container: "mx-auto w-full max-w-90rem px-md flex flex-col lg:grid",
+      wrapper: "",
+      header: "",
+      leading: "flex items-center mb-6",
+      leadingIcon: "size-10 shrink-0 text-primary",
+      headline: "",
+      title: "text-pretty tracking-tight font-bold",
+      description: "text-muted-foreground",
+      body: "",
+      footer: "",
+      links: "flex flex-wrap"
+    },
+    variants: {
+      variant: {
+        default: {
+          container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+          headline: "mb-3",
+          title: "text-3xl sm:text-4xl lg:text-5xl text-highlighted",
+          description: "text-base sm:text-lg",
+          body: "mt-8",
+          footer: "mt-8",
+          links: "gap-x-6 gap-y-3"
+        },
+        hero: {
+          container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+          headline: "mb-4",
+          title: "text-5xl sm:text-7xl text-highlighted",
+          description: "text-lg sm:text-xl/8",
+          leading: "mb-6",
+          body: "mt-10",
+          footer: "mt-10",
+          links: "gap-x-6 gap-y-3"
+        },
+        cta: {
+          root: "rounded-xl overflow-hidden",
+          container: "lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
+          title: "text-3xl sm:text-4xl",
+          description: "text-base sm:text-lg",
+          body: "mt-8",
+          footer: "mt-8",
+          links: "gap-x-6 gap-y-3"
+        }
       },
-      hero: {
-        container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
-        headline: "mb-4",
-        title: "text-5xl sm:text-7xl",
-        description: "text-lg sm:text-xl/8",
-        leading: "mb-6",
-        body: "mt-10",
-        footer: "mt-10",
-        links: "gap-x-6 gap-y-3"
+      ctaVariant: {
+        solid: {
+          root: "bg-inverted text-inverted",
+          description: "text-dimmed"
+        },
+        outline: {
+          root: "bg-default ring ring-default",
+          description: "text-muted"
+        },
+        soft: {
+          root: "bg-elevated/50",
+          description: "text-toned"
+        },
+        subtle: {
+          root: "bg-elevated/50 ring ring-default",
+          description: "text-toned"
+        },
+        naked: {
+          description: "text-muted"
+        }
       },
-      cta: {
-        root: "rounded-xl overflow-hidden",
-        container: "lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
-        title: "text-3xl sm:text-4xl",
-        description: "text-base sm:text-lg text-muted",
-        body: "mt-8",
-        footer: "mt-8",
-        links: "gap-x-6 gap-y-3"
-      }
-    },
-    ctaVariant: {
-      solid: {
-        root: "bg-inverted text-inverted",
-        title: "text-inverted",
-        description: "text-dimmed"
+      orientation: {
+        horizontal: {
+          container: "lg:grid-cols-2 lg:items-center",
+          description: "text-pretty"
+        },
+        vertical: {
+          container: "",
+          headline: "justify-center",
+          leading: "justify-center",
+          title: "text-center",
+          description: "text-center text-balance",
+          links: "justify-center"
+        }
       },
-      outline: {
-        root: "bg-default ring ring-default",
-        description: "text-muted"
+      reverse: {
+        true: {
+          wrapper: "order-last"
+        }
       },
-      soft: {
-        root: "bg-elevated/50",
-        description: "text-toned"
+      headline: {
+        true: {
+          headline: "font-semibold text-primary flex items-center gap-1.5"
+        }
       },
-      subtle: {
-        root: "bg-elevated/50 ring ring-default",
-        description: "text-toned"
+      title: {
+        true: {
+          description: "mt-6"
+        }
       },
-      naked: {
-        description: "text-muted"
-      }
-    },
-    orientation: {
-      horizontal: {
-        container: "lg:grid-cols-2 lg:items-center",
-        description: "text-pretty"
+      description: {
+        true: {}
       },
-      vertical: {
-        container: "",
-        headline: "justify-center",
-        leading: "justify-center",
-        title: "text-center",
-        description: "text-center text-balance",
-        links: "justify-center"
-      }
-    },
-    reverse: {
-      true: {
-        wrapper: "order-last"
-      }
-    },
-    headline: {
-      true: {
-        headline: "font-semibold text-primary flex items-center gap-1.5"
+      body: {
+        true: {}
       }
     },
-    title: {
-      true: {
-        description: "mt-6"
-      }
-    },
-    description: {
-      true: {}
-    },
-    body: {
-      true: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "default",
-      orientation: "vertical",
-      title: true,
-      classNames: {
-        body: "mt-16"
-      }
-    },
-    {
-      variant: "default",
-      orientation: "vertical",
-      description: true,
-      classNames: {
-        body: "mt-16"
+    compoundVariants: [
+      {
+        variant: "default",
+        orientation: "vertical",
+        title: true,
+        classNames: {
+          body: "mt-16"
+        }
+      },
+      {
+        variant: "default",
+        orientation: "vertical",
+        description: true,
+        classNames: {
+          body: "mt-16"
+        }
+      },
+      {
+        variant: "default",
+        orientation: "vertical",
+        body: true,
+        classNames: {
+          footer: "mt-16"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "outline",
+        classNames: {
+          root: "bg-default ring ring-default"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "solid",
+        classNames: {
+          root: "bg-inverted text-inverted",
+          title: "text-inverted",
+          description: "text-dimmed"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "soft",
+        classNames: {
+          root: "bg-elevated/50",
+          description: "text-toned"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "subtle",
+        classNames: {
+          root: "bg-elevated/50 ring ring-default",
+          description: "text-toned"
+        }
       }
-    },
-    {
+    ],
+    defaultVariants: {
       variant: "default",
-      orientation: "vertical",
-      body: true,
-      classNames: {
-        footer: "mt-16"
-      }
-    },
-    {
-      variant: "cta",
-      ctaVariant: "outline",
-      classNames: {
-        root: "bg-default ring ring-default",
-        description: "text-muted"
-      }
-    },
-    {
-      variant: "cta",
-      ctaVariant: "solid",
-      classNames: {
-        root: "bg-inverted text-inverted",
-        title: "text-inverted",
-        description: "text-dimmed"
-      }
-    },
-    {
-      variant: "cta",
-      ctaVariant: "soft",
-      classNames: {
-        root: "bg-elevated/50",
-        description: "text-toned"
-      }
-    },
-    {
-      variant: "cta",
-      ctaVariant: "subtle",
-      classNames: {
-        root: "bg-elevated/50 ring ring-default",
-        description: "text-toned"
-      }
+      orientation: "vertical"
     }
-  ],
-  defaultVariants: {
-    variant: "default",
-    orientation: "vertical"
-  }
-})
+  })
+
+export default createPageSectionTheme()

package/src/themes/page.theme.ts

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

package/src/themes/pagination.theme.ts

@@ -1,26 +1,28 @@
+import { defaultColors } from "../presets/defaults"
 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: "" }
+export const createPaginationTheme = (colors: string[] = defaultColors) =>
+  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
     }
-  },
-  defaultVariants: {
-    active: false
-  }
-})
+  })
 
-export default paginationTheme
+export default createPaginationTheme()

package/src/themes/password.theme.ts

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

package/src/themes/phone-mockup.theme.ts

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

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

@@ -0,0 +1,14 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createPinInputTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createPinInputTheme()

package/src/themes/placeholder.theme.ts

@@ -1,12 +1,15 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["base", "svg"],
-  base: {
-    base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
-    svg: "absolute inset-0 h-full w-full stroke-primary/10"
-  },
-  variants: {},
-  compoundVariants: [],
-  defaultVariants: {}
-})
+export const createPlaceholderTheme = () =>
+  defineTheme({
+    slots: ["base", "svg"],
+    base: {
+      base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
+      svg: "absolute inset-0 h-full w-full stroke-primary/10"
+    },
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {}
+  })
+
+export default createPlaceholderTheme()

package/src/themes/popover.theme.ts

@@ -1,28 +1,30 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const popoverTheme = defineTheme({
-  slots: ["root", "trigger", "content"],
-  base: {
-    root: "relative inline-block group/popover",
-    trigger: "",
-    content: [
-      "absolute z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-      "transition-all duration-200 invisible opacity-0 scale-95 origin-center",
-      "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:scale-100",
-      "focus-within:visible focus-within:opacity-100 focus-within:scale-100"
-    ]
-  },
-  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 createPopoverTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "trigger", "content"],
+    base: {
+      root: "relative inline-block group/popover",
+      trigger: "",
+      content: [
+        "absolute z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        "transition-all duration-200 invisible opacity-0 scale-95 origin-center",
+        "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:scale-100",
+        "focus-within:visible focus-within:opacity-100 focus-within:scale-100"
+      ]
+    },
+    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 popoverTheme
+export default createPopoverTheme()

package/src/themes/post.theme.ts

@@ -1,10 +1,33 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createPostTheme = () =>
+  defineTheme({
+    slots: ["root", "imageWrapper", "image", "content", "title", "description", "date", "footer"],
+    base: {
+      root: "group relative flex flex-col overflow-hidden transition-all duration-300",
+      imageWrapper: "relative overflow-hidden aspect-video",
+      image: "w-full h-full object-cover transition-transform duration-500",
+      content: "flex-1 p-4",
+      title: "font-bold text-xl line-clamp-2",
+      description: "text-neutral-500 text-sm mt-1 line-clamp-3",
+      date: "text-xs text-neutral-400 mt-2",
+      footer: "p-4 border-t border-neutral-100"
+    },
+    variants: {
+      variant: {
+        soft: {
+          root: "bg-white rounded-2xl shadow-xl hover:shadow-2xl border border-neutral-100",
+          image: "group-hover:scale-105"
+        },
+        ghost: {
+          root: "bg-transparent",
+          image: "rounded-xl group-hover:opacity-90"
+        }
+      }
+    },
+    defaultVariants: {
+      variant: "soft"
+    }
+  })
+
+export default createPostTheme()

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: {}
-})
+export const createPricingPlanTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createPricingPlanTheme()