@rimelight/ui 0.0.33 → 0.0.35

package/src/styles/index.css

@@ -1,160 +1,158 @@
-@import "./prism.css";
-
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-sans);
-}
-
-/* Keyboard Component Styles */
-.keyboard-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16px;
-  border-radius: 12px;
-  width: 100%;
-  max-width: 100%;
-  margin: 16px 0;
-  box-sizing: border-box;
-}
-.keyboard-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-.keyboard-svg {
-  width: 100%;
-  height: auto;
-  max-width: 900px;
-}
-.kb-key-label {
-  font-family: var(--font-mono, monospace);
-  font-size: 10px;
-  font-weight: 600;
-  pointer-events: none;
-  user-select: none;
-}
-.kb-legend {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 12px 24px;
-  margin-top: 24px;
-  width: 100%;
-}
-.keyboard-wrapper .legend-item {
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px;
-  margin: 0 !important;
-  padding: 0 !important;
-  font-size: 10px;
-  color: #a0a0b0;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 500;
-  white-space: nowrap;
-  line-height: 1 !important;
-}
-.legend-color-svg {
-  flex-shrink: 0;
-  display: block;
-}
-.keyboard-wrapper .legend-label {
-  margin: 0 !important;
-  padding: 0 !important;
-  line-height: 1 !important;
-  display: inline-block !important;
-}
-
-/* Gamepad Component Styles */
-.gamepad-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48px;
-  border-radius: 24px;
-  width: 100%;
-  max-width: 100%;
-  margin: 24px 0;
-  box-sizing: border-box;
-  container-type: inline-size;
-  border: 1px solid #1a1a2e;
-}
-.gamepad-container {
-  width: 100%;
-  max-width: 440px;
-}
-.gamepad-svg {
-  width: 100%;
-  height: auto;
-}
-.gp-btn rect,
-.gp-btn circle {
-  fill: #1e1e30;
-  stroke: #33334d;
-  stroke-width: 1;
-  transition: all 0.2s ease;
-}
-.btn-label {
-  fill: #555570;
-  font-size: 10px;
-  font-family: var(--font-sans, system-ui);
-  font-weight: 800;
-  pointer-events: none;
-  line-height: 1;
-}
-.gp-btn.active rect,
-.gp-btn.active circle {
-  fill: var(--hl-color, #00c16a);
-  stroke: #ffffff33;
-  stroke-width: 1.5;
-}
-.gp-btn.active .btn-label {
-  fill: #fff;
-}
-.gamepad-legend {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 12px 24px;
-  margin-top: 40px;
-  width: 100%;
-}
-.gamepad-wrapper .legend-item {
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px;
-  height: 10px !important;
-  font-size: 10px;
-  color: #777790;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-weight: 700;
-  line-height: 10px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-.gamepad-wrapper .legend-label {
-  display: inline-block !important;
-  height: 10px !important;
-  line-height: 10px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.kb-legend-label {
-  font-family: var(--font-sans, system-ui);
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.gp-legend-label {
-  font-family: var(--font-sans, system-ui);
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+/* Keyboard Component Styles */
+.keyboard-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 100%;
+  margin: 16px 0;
+  box-sizing: border-box;
+}
+.keyboard-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.keyboard-svg {
+  width: 100%;
+  height: auto;
+  max-width: 900px;
+}
+.kb-key-label {
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+  font-weight: 600;
+  pointer-events: none;
+  user-select: none;
+}
+.kb-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px 24px;
+  margin-top: 24px;
+  width: 100%;
+}
+.keyboard-wrapper .legend-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px;
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 10px;
+  color: #a0a0b0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  white-space: nowrap;
+  line-height: 1 !important;
+}
+.legend-color-svg {
+  flex-shrink: 0;
+  display: block;
+}
+.keyboard-wrapper .legend-label {
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1 !important;
+  display: inline-block !important;
+}
+
+/* Gamepad Component Styles */
+.gamepad-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px;
+  border-radius: 24px;
+  width: 100%;
+  max-width: 100%;
+  margin: 24px 0;
+  box-sizing: border-box;
+  container-type: inline-size;
+  border: 1px solid #1a1a2e;
+}
+.gamepad-container {
+  width: 100%;
+  max-width: 440px;
+}
+.gamepad-svg {
+  width: 100%;
+  height: auto;
+}
+.gp-btn rect,
+.gp-btn circle {
+  fill: #1e1e30;
+  stroke: #33334d;
+  stroke-width: 1;
+  transition: all 0.2s ease;
+}
+.btn-label {
+  fill: #555570;
+  font-size: 10px;
+  font-family: var(--font-sans, system-ui);
+  font-weight: 800;
+  pointer-events: none;
+  line-height: 1;
+}
+.gp-btn.active rect,
+.gp-btn.active circle {
+  fill: var(--hl-color, #00c16a);
+  stroke: #ffffff33;
+  stroke-width: 1.5;
+}
+.gp-btn.active .btn-label {
+  fill: #fff;
+}
+.gamepad-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px 24px;
+  margin-top: 40px;
+  width: 100%;
+}
+.gamepad-wrapper .legend-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px;
+  height: 10px !important;
+  font-size: 10px;
+  color: #777790;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  line-height: 10px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.gamepad-wrapper .legend-label {
+  display: inline-block !important;
+  height: 10px !important;
+  line-height: 10px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.kb-legend-label {
+  font-family: var(--font-sans, system-ui);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.gp-legend-label {
+  font-family: var(--font-sans, system-ui);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}

package/src/themes/3d-hover.theme.ts

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

package/src/themes/accordion.theme.ts

@@ -1,13 +1,39 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAccordionTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createAccordionTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAccordionTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "item",
+      "header",
+      "trigger",
+      "content",
+      "body",
+      "leadingIcon",
+      "trailingIcon",
+      "label"
+    ],
+    base: {
+      root: "w-full",
+      item: "border-b border-default last:border-b-0",
+      header: "flex",
+      trigger:
+        "group flex w-full flex-1 items-center gap-1.5 font-medium text-sm py-3.5 px-4 focus-visible:outline-primary min-w-0 cursor-pointer list-none [&::-webkit-details-marker]:hidden",
+      content: "overflow-hidden focus:outline-none pt-1 px-4",
+      body: "text-sm pb-3.5 text-astro-gray-200",
+      leadingIcon: "shrink-0 size-5 text-astro-gray-300",
+      trailingIcon:
+        "shrink-0 size-5 ms-auto rotate-0 transition-transform duration-200 group-open:rotate-180 text-astro-gray-300",
+      label: "text-start break-words text-astro-gray-100"
+    },
+    variants: {
+      disabled: {
+        true: {
+          trigger: "cursor-not-allowed opacity-50 select-none"
+        }
+      }
+    },
+    defaultVariants: {}
+  })
+
+export default createAccordionTheme()

package/src/themes/app.theme.ts

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

package/src/themes/aspect-ratio.theme.ts

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

package/src/themes/audio.theme.ts

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

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

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

package/src/themes/avatar.theme.ts

@@ -1,84 +1,84 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAvatarTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "image", "fallback", "icon", "badge"],
-    base: {
-      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
-      image: "h-full w-full rounded-[inherit] object-cover",
-      fallback: "font-medium truncate",
-      icon: "shrink-0",
-      badge: "absolute rounded-full ring-2 ring-bg"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(
-          colors.map((color) => [
-            color,
-            {
-              root: `bg-${color}/10`,
-              fallback: `text-${color}`,
-              icon: `text-${color}`
-            }
-          ])
-        ),
-        neutral: {
-          root: "bg-elevated",
-          fallback: "text-muted",
-          icon: "text-muted"
-        }
-      },
-      size: {
-        "3xs": {
-          root: "size-4 text-[8px]",
-          badge: "size-1.5"
-        },
-        "2xs": {
-          root: "size-5 text-[10px]",
-          badge: "size-2"
-        },
-        "xs": {
-          root: "size-6 text-xs",
-          badge: "size-2"
-        },
-        "sm": {
-          root: "size-7 text-sm",
-          badge: "size-2.5"
-        },
-        "md": {
-          root: "size-8 text-base",
-          badge: "size-3"
-        },
-        "lg": {
-          root: "size-9 text-lg",
-          badge: "size-3"
-        },
-        "xl": {
-          root: "size-10 text-xl",
-          badge: "size-3.5"
-        },
-        "2xl": {
-          root: "size-11 text-[22px]",
-          badge: "size-4"
-        },
-        "3xl": {
-          root: "size-12 text-2xl",
-          badge: "size-4"
-        }
-      },
-      badgePosition: {
-        "top-right": { badge: "top-0 right-0" },
-        "bottom-right": { badge: "bottom-0 right-0" },
-        "top-left": { badge: "top-0 left-0" },
-        "bottom-left": { badge: "bottom-0 left-0" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "neutral",
-      badgePosition: "bottom-right"
-    }
-  })
-
-export default createAvatarTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAvatarTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "image", "fallback", "icon", "badge"],
+    base: {
+      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
+      image: "h-full w-full rounded-[inherit] object-cover",
+      fallback: "font-medium truncate",
+      icon: "shrink-0",
+      badge: "absolute rounded-full ring-2 ring-bg"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              root: `bg-${color}/10`,
+              fallback: `text-${color}`,
+              icon: `text-${color}`
+            }
+          ])
+        ),
+        neutral: {
+          root: "bg-elevated",
+          fallback: "text-foreground",
+          icon: "text-muted"
+        }
+      },
+      size: {
+        "3xs": {
+          root: "size-4 text-[8px]",
+          badge: "size-1.5"
+        },
+        "2xs": {
+          root: "size-5 text-[10px]",
+          badge: "size-2"
+        },
+        "xs": {
+          root: "size-6 text-xs",
+          badge: "size-2"
+        },
+        "sm": {
+          root: "size-7 text-sm",
+          badge: "size-2.5"
+        },
+        "md": {
+          root: "size-8 text-base",
+          badge: "size-3"
+        },
+        "lg": {
+          root: "size-9 text-lg",
+          badge: "size-3"
+        },
+        "xl": {
+          root: "size-10 text-xl",
+          badge: "size-3.5"
+        },
+        "2xl": {
+          root: "size-11 text-[22px]",
+          badge: "size-4"
+        },
+        "3xl": {
+          root: "size-12 text-2xl",
+          badge: "size-4"
+        }
+      },
+      badgePosition: {
+        "top-right": { badge: "top-0 right-0" },
+        "bottom-right": { badge: "bottom-0 right-0" },
+        "top-left": { badge: "top-0 left-0" },
+        "bottom-left": { badge: "bottom-0 left-0" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "neutral",
+      badgePosition: "bottom-right"
+    }
+  })
+
+export default createAvatarTheme()