@rimelight/ui 0.0.39 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [

package/src/components/button/RLAButton.astro

@@ -28,6 +28,7 @@ const {
   square = false,
   rounded = false,
   block = false,
+  justify = "center",
   active = false,
   theme,
   activeColor,
@@ -60,6 +61,7 @@ const classes = resolveClasses(button, {
   color: (active && activeColor ? activeColor : color) as "neutral",
   size,
   block,
+  justify,
   square: square || (!label && !Astro.slots.has("default")),
   rounded,
   leading: isLeading,

package/src/components/button/button.theme.ts

@@ -11,7 +11,7 @@ export const createButtonTheme = (colors: readonly string[] = colorConfig.colors
     slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
     base: {
       root: [
-        "group inline-flex items-center justify-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
+        "group inline-flex items-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
         "transition-colors outline-none",
         "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
       ],
@@ -63,8 +63,16 @@ export const createButtonTheme = (colors: readonly string[] = colorConfig.colors
           trailingIcon: "size-7"
         }
       },
+      justify: {
+        start: { root: "justify-start" },
+        center: { root: "justify-center" },
+        end: { root: "justify-end" },
+        between: { root: "justify-between" },
+        around: { root: "justify-around" },
+        evenly: { root: "justify-evenly" }
+      },
       block: {
-        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
+        true: { root: "w-full", trailingIcon: "ms-auto" }
       },
       square: {
         true: {},
@@ -218,7 +226,8 @@ export const createButtonTheme = (colors: readonly string[] = colorConfig.colors
     defaultVariants: {
       variant: "solid",
       color: "primary",
-      size: "md"
+      size: "md",
+      justify: "center"
     }
   })
 }

package/src/components/button/button.ts

@@ -46,6 +46,10 @@ export interface ButtonProps extends LinkProps {
    * Makes the button stretch to full width
    */
   block?: boolean
+  /**
+   * Horizontal alignment of content inside the button flex container
+   */
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
   /**
    * Applies active state styling
    */

package/src/components/tabs/tabs.theme.ts

@@ -2,11 +2,22 @@ import { defineTheme } from "../../utils/defineTheme"
 
 export const createTabsTheme = () =>
   defineTheme({
-    slots: ["root", "list", "indicator", "trigger", "leadingIcon", "leadingAvatar", "label", "trailingBadge", "content"],
+    slots: [
+      "root",
+      "list",
+      "indicator",
+      "trigger",
+      "leadingIcon",
+      "leadingAvatar",
+      "label",
+      "trailingBadge",
+      "content"
+    ],
     base: {
       root: "flex gap-2 w-full",
       list: "relative flex p-1 group items-center min-w-0",
-      indicator: "absolute transition-[translate,width,height,top,left] duration-200 ease-out pointer-events-none",
+      indicator:
+        "absolute transition-[translate,width,height,top,left] duration-200 ease-out pointer-events-none",
       trigger:
         "group relative inline-flex items-center justify-center min-w-0 whitespace-nowrap font-medium transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-none data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground",
       leadingIcon: "shrink-0",
@@ -77,4 +88,3 @@ export const createTabsTheme = () =>
   })
 
 export default createTabsTheme()
-

package/src/components/tabs/tabs.ts

@@ -28,17 +28,20 @@ export interface TabsProps<T extends TabItem = TabItem> {
   defaultValue?: string
   /**
    * Tab variant.
-   * @defaultValue 'pill'
+   *
+   * @defaultValue "pill"
    */
   variant?: "pill" | "underline" | "link" | "solid" | "pills"
   /**
    * Layout orientation.
-   * @defaultValue 'horizontal'
+   *
+   * @defaultValue "horizontal"
    */
   orientation?: "horizontal" | "vertical"
   /**
    * Size scale.
-   * @defaultValue 'md'
+   *
+   * @defaultValue "md"
    */
   size?: "xs" | "sm" | "md" | "lg" | "xl"
   /**
@@ -47,23 +50,27 @@ export interface TabsProps<T extends TabItem = TabItem> {
   color?: ThemeColor
   /**
    * Whether to render content panels automatically. Set to false for tab bar only.
+   *
    * @defaultValue true
    */
   content?: boolean
   /**
-   * Unmount hidden tab panels from DOM. Defaults to true.
-   * If false, panel is hidden via CSS/attribute.
+   * Unmount hidden tab panels from DOM. Defaults to true. If false, panel is hidden via
+   * CSS/attribute.
+   *
    * @defaultValue true
    */
   unmountOnHide?: boolean
   /**
    * Property key for value on item object.
-   * @defaultValue 'value'
+   *
+   * @defaultValue "value"
    */
   valueKey?: string
   /**
    * Property key for label on item object.
-   * @defaultValue 'label'
+   *
+   * @defaultValue "label"
    */
   labelKey?: string
   /**
@@ -76,4 +83,3 @@ export interface TabsProps<T extends TabItem = TabItem> {
   class?: any
   [key: string]: unknown
 }
-

package/src/presets/index.ts

@@ -202,14 +202,14 @@ export default definePreset((options?: RimelightPresetOptions) => {
         }
       ],
       [
-        /^(text)-(default|inverted|muted|dimmed|toned|highlighted)(?:\/(\d+))?$/,
+        /^(text)-(default|muted|dimmed|toned|highlighted|elevated|accented|inverted)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? { color: `color-mix(in srgb, var(--text-color-${name}) ${opacity}%, transparent)` }
             : { color: `var(--text-color-${name})` }
       ],
       [
-        /^(bg)-(default|inverted|muted|elevated|accented)(?:\/(\d+))?$/,
+        /^(bg)-(default|muted|elevated|accented|dimmed|toned|highlighted)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? {
@@ -218,7 +218,20 @@ export default definePreset((options?: RimelightPresetOptions) => {
             : { "background-color": `var(--background-color-${name})` }
       ],
       [
-        /^(ring)-(default|inverted|muted|accented)(?:\/(\d+))?$/,
+        /^bg-inverted(?:\/(\d+))?$/,
+        ([, opacity]) =>
+          opacity
+            ? {
+                "background-color": `color-mix(in srgb, var(--background-color-inverted) ${opacity}%, transparent)`,
+                "color": "var(--text-color-inverted)"
+              }
+            : {
+                "background-color": "var(--background-color-inverted)",
+                "color": "var(--text-color-inverted)"
+              }
+      ],
+      [
+        /^(ring)-(default|muted|elevated|accented|dimmed|toned|highlighted|inverted)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? {
@@ -227,7 +240,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
             : { "--un-ring-color": `var(--ring-color-${name})` }
       ],
       [
-        /^(border)-(default|inverted|muted|accented)(?:\/(\d+))?$/,
+        /^(border)-(default|muted|elevated|accented|dimmed|toned|highlighted|inverted)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? {
@@ -460,24 +473,41 @@ export default definePreset((options?: RimelightPresetOptions) => {
 
           /* Text / background / border / ring semantic tokens using responsive neutral variables */
           --text-color-default: var(--color-neutral-700);
-          --text-color-muted: var(--color-neutral-500);
-          --text-color-dimmed: var(--color-neutral-400);
-          --text-color-toned: var(--color-neutral-600);
+          --text-color-muted: var(--color-neutral-600);
+          --text-color-dimmed: var(--color-neutral-500);
+          --text-color-toned: var(--color-neutral-800);
           --text-color-highlighted: var(--color-neutral-950);
-          --text-color-inverted: light-dark(#ffffff, var(--color-neutral-50));
+          --text-color-elevated: var(--color-neutral-800);
+          --text-color-accented: var(--color-neutral-900);
+          --text-color-inverted: var(--color-neutral-50);
+
           --background-color-default: light-dark(#ffffff, var(--color-neutral-50));
           --background-color-muted: var(--color-neutral-100);
           --background-color-elevated: var(--color-neutral-200);
           --background-color-accented: var(--color-neutral-300);
+          --background-color-dimmed: var(--color-neutral-400);
+          --background-color-toned: var(--color-neutral-800);
+          --background-color-highlighted: var(--color-neutral-900);
           --background-color-inverted: var(--color-neutral-950);
+
           --border-color-default: var(--color-neutral-200);
           --border-color-muted: var(--color-neutral-100);
+          --border-color-elevated: var(--color-neutral-200);
           --border-color-accented: var(--color-neutral-300);
+          --border-color-dimmed: var(--color-neutral-400);
+          --border-color-toned: var(--color-neutral-800);
+          --border-color-highlighted: var(--color-neutral-900);
           --border-color-inverted: var(--color-neutral-950);
+
           --ring-color-default: var(--color-neutral-200);
           --ring-color-muted: var(--color-neutral-100);
+          --ring-color-elevated: var(--color-neutral-200);
           --ring-color-accented: var(--color-neutral-300);
+          --ring-color-dimmed: var(--color-neutral-400);
+          --ring-color-toned: var(--color-neutral-800);
+          --ring-color-highlighted: var(--color-neutral-900);
           --ring-color-inverted: var(--color-neutral-950);
+
           --divide-color-default: var(--color-neutral-200);
           --divide-color-inverted: var(--color-neutral-950);