@rimelight/ui 0.0.31 → 0.0.33

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

@@ -0,0 +1,187 @@
+import { defineTheme } from "../utils/defineTheme"
+
+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"
+        }
+      },
+      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"
+        }
+      },
+      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"
+        }
+      },
+      reverse: {
+        true: {
+          wrapper: "order-last"
+        }
+      },
+      headline: {
+        true: {
+          headline: "font-semibold text-primary flex items-center gap-1.5"
+        }
+      },
+      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"
+        }
+      },
+      {
+        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"
+    }
+  })
+
+export default createPageSectionTheme()

package/src/themes/page.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../utils/defineTheme"
+
+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

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

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

@@ -0,0 +1,13 @@
+import { defineTheme } from "../utils/defineTheme"
+
+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: {}
-})
+import { defineTheme } from "../utils/defineTheme"
+
+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

@@ -0,0 +1,33 @@
+import { defineTheme } from "../utils/defineTheme"
+
+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/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

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

@@ -0,0 +1,13 @@
+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,26 +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, { indicator: `bg-${color}-500` }])),
-      size: {
-        sm: { root: "h-1.5" },
-        md: { root: "h-3" },
-        lg: { root: "h-5" }
-      }
-    },
-    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

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

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

package/src/themes/quote.theme.ts

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

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

package/src/themes/rating.theme.ts

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

package/src/themes/{scrollArea.theme.ts → 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()