@rimelight/ui 0.0.56 → 0.0.58

package/src/components/splitter/RLSSplitter.tsx

@@ -121,10 +121,7 @@ const RLSSplitter: Component<RLSSplitterProps> = (allProps) => {
     setSizes(next)
   }
 
-  const panelStyle = (size: number) =>
-    isHorizontal()
-      ? { "flex": `0 0 ${size}%` as const, "min-width": "0" }
-      : { "flex": `0 0 ${size}%` as const, "min-height": "0" }
+  const panelClass = (size: number) => (isHorizontal() ? `w-[${size}%]` : `h-[${size}%]`)
 
   return (
     <div
@@ -139,10 +136,9 @@ const RLSSplitter: Component<RLSSplitterProps> = (allProps) => {
         {(size, i) => (
           <>
             <div
-              class={resolvedClasses().panel}
+              class={`${resolvedClasses().panel} ${panelClass(size)}`}
               data-slot="panel"
               data-resizable-panel={i()}
-              style={panelStyle(size)}
             >
               {panelContents()[i()]}
             </div>

package/src/components/steps/RLASteps.astro

@@ -1,110 +1,110 @@
----
-import type { StepsProps } from "./steps"
-import { stepsTheme } from "./steps.theme"
-
-
-
-const {
-  size = "md",
-  ...rest
-} = Astro.props as StepsProps
-
-const classes = stepsTheme(Astro.props)
----
-
-<div class:list={[classes.root, "rl-steps"]} data-slot="root" data-size={size} {...rest}>
-  <ol class="rl-steps-list">
-    <slot />
-  </ol>
-</div>
-
-<style is:inline>
-  .rl-steps-list {
-    list-style: none;
-    counter-reset: rl-step 0;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .rl-steps-list > li {
-    counter-increment: rl-step;
-    position: relative;
-    padding-left: 2.625rem;
-    padding-bottom: 1.75rem;
-    margin: 0;
-  }
-
-  .rl-steps-list > li:last-child {
-    padding-bottom: 0;
-  }
-
-  .rl-steps-list > li::before {
-    content: counter(rl-step);
-    position: absolute;
-    left: 0;
-    top: 0.125rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 700;
-    line-height: 1;
-    color: var(--rl-neutral-50);
-    background-color: var(--primary, #3b82f6);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    z-index: 1;
-  }
-
-  .rl-steps-list > li::after {
-    content: '';
-    position: absolute;
-    left: calc(0.875rem - 1px);
-    top: calc(1.75rem + 0.375rem);
-    bottom: 0;
-    width: 2px;
-    background-color: var(--rl-neutral-200);
-  }
-
-  .rl-steps-list > li:last-child::after {
-    display: none;
-  }
-
-  .rl-steps-list > li > :first-child {
-    margin-top: 0;
-  }
-
-  /* size: sm */
-  [data-size="sm"] .rl-steps-list > li {
-    padding-left: 2rem;
-    padding-bottom: 1.25rem;
-  }
-  [data-size="sm"] .rl-steps-list > li::before {
-    width: 1.375rem;
-    height: 1.375rem;
-    font-size: 0.625rem;
-  }
-  [data-size="sm"] .rl-steps-list > li::after {
-    left: calc(0.6875rem - 1px);
-    top: calc(1.375rem + 0.375rem);
-  }
-
-  /* size: lg */
-  [data-size="lg"] .rl-steps-list > li {
-    padding-left: 3.25rem;
-    padding-bottom: 2.25rem;
-  }
-  [data-size="lg"] .rl-steps-list > li::before {
-    width: 2.25rem;
-    height: 2.25rem;
-    font-size: 0.875rem;
-  }
-  [data-size="lg"] .rl-steps-list > li::after {
-    left: calc(1.125rem - 1px);
-    top: calc(2.25rem + 0.375rem);
-  }
-</style>
+---
+import type { StepsProps } from "./steps"
+import { stepsTheme } from "./steps.theme"
+
+
+
+const {
+  size = "md",
+  ...rest
+} = Astro.props as StepsProps
+
+const classes = stepsTheme(Astro.props)
+---
+
+<div class:list={[classes.root, "rl-steps"]} data-slot="root" data-size={size} {...rest}>
+  <ol class="rl-steps-list">
+    <slot />
+  </ol>
+</div>
+
+<style>
+  .rl-steps-list {
+    list-style: none;
+    counter-reset: rl-step 0;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rl-steps-list > li {
+    counter-increment: rl-step;
+    position: relative;
+    padding-left: 2.625rem;
+    padding-bottom: 1.75rem;
+    margin: 0;
+  }
+
+  .rl-steps-list > li:last-child {
+    padding-bottom: 0;
+  }
+
+  .rl-steps-list > li::before {
+    content: counter(rl-step);
+    position: absolute;
+    left: 0;
+    top: 0.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--rl-neutral-50);
+    background-color: var(--primary, #3b82f6);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+  }
+
+  .rl-steps-list > li::after {
+    content: '';
+    position: absolute;
+    left: calc(0.875rem - 1px);
+    top: calc(1.75rem + 0.375rem);
+    bottom: 0;
+    width: 2px;
+    background-color: var(--rl-neutral-200);
+  }
+
+  .rl-steps-list > li:last-child::after {
+    display: none;
+  }
+
+  .rl-steps-list > li > :first-child {
+    margin-top: 0;
+  }
+
+  /* size: sm */
+  [data-size="sm"] .rl-steps-list > li {
+    padding-left: 2rem;
+    padding-bottom: 1.25rem;
+  }
+  [data-size="sm"] .rl-steps-list > li::before {
+    width: 1.375rem;
+    height: 1.375rem;
+    font-size: 0.625rem;
+  }
+  [data-size="sm"] .rl-steps-list > li::after {
+    left: calc(0.6875rem - 1px);
+    top: calc(1.375rem + 0.375rem);
+  }
+
+  /* size: lg */
+  [data-size="lg"] .rl-steps-list > li {
+    padding-left: 3.25rem;
+    padding-bottom: 2.25rem;
+  }
+  [data-size="lg"] .rl-steps-list > li::before {
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: 0.875rem;
+  }
+  [data-size="lg"] .rl-steps-list > li::after {
+    left: calc(1.125rem - 1px);
+    top: calc(2.25rem + 0.375rem);
+  }
+</style>

package/src/components/sticky-surface/RLAStickySurface.astro

@@ -1,67 +1,49 @@
----
-import type { StickySurfaceProps } from "./sticky-surface"
-import { stickySurfaceTheme } from "./sticky-surface.theme"
-
-
-
-const {
-  offsetTop = 0,
-  zIndex = 10,
-  stuckShadow = true,
-  ...rest
-} = Astro.props as StickySurfaceProps
-
-
-
-const classes = stickySurfaceTheme(Astro.props)
-const topOffset = `${offsetTop}px`
-const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
----
-<div
-  class:list={[classes.root, id, stuckShadow && "rla-sticky-shadow"]}
-  data-slot="root"
-  {...rest}
->
-  <slot />
-</div>
-
-<style is:inline set:html={`
-  .${id} {
-    top: ${topOffset} !important;
-    z-index: ${zIndex} !important;
-    /*
-     * CSS scroll-state(stuck: top) — Chrome 133+
-     *
-     * Declare this element as a scroll-state container so it can query
-     * its own stuck state. When position: sticky causes it to be pinned
-     * at the top, the browser marks it as "stuck: top".
-     */
-    container-type: scroll-state;
-    container-name: rla-sticky-${id};
-  }
-`} />
-
-<!--
-  The stuck shadow is applied via a nested CSS @container scroll-state rule.
-  This is progressive enhancement — browsers that don't support scroll-state()
-  silently ignore it and the surface just has no shadow (which is fine).
--->
-{stuckShadow && (
-  <style is:inline set:html={`
-    @container rla-sticky-${id} scroll-state(stuck: top) {
-      .${id} {
-        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      @container rla-sticky-${id} scroll-state(stuck: top) {
-        .${id} {
-          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.40), 0 1px 4px 0 rgba(0, 0, 0, 0.20);
-          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-        }
-      }
-    }
-  `} />
-)}
+---
+import type { StickySurfaceProps } from "./sticky-surface"
+import { stickySurfaceTheme } from "./sticky-surface.theme"
+
+
+
+const {
+  offsetTop = 0,
+  zIndex = 10,
+  stuckShadow = true,
+  ...rest
+} = Astro.props as StickySurfaceProps
+
+
+
+const classes = stickySurfaceTheme(Astro.props)
+const topClass = offsetTop === 0 ? "top-0" : `top-[${offsetTop}px]`
+const zClass = `z-[${zIndex}]`
+---
+<div
+  class:list={[classes.root, topClass, zClass, "rla-sticky-surface", stuckShadow && "rla-sticky-shadow"]}
+  data-slot="root"
+  {...rest}
+>
+  <slot />
+</div>
+
+<style>
+  .rla-sticky-surface {
+    container-type: scroll-state;
+    container-name: rla-sticky;
+  }
+
+  @container rla-sticky scroll-state(stuck: top) {
+    .rla-sticky-shadow {
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @container rla-sticky scroll-state(stuck: top) {
+      .rla-sticky-shadow {
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.40), 0 1px 4px 0 rgba(0, 0, 0, 0.20);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+      }
+    }
+  }
+</style>

package/src/components/table/RLATable.astro

@@ -474,11 +474,11 @@ const hasFooters = visibleColumns.some(
 
 const showToolbar = searchable || showColumnsToggle || exportable || Astro.slots.has("toolbar")
 
-function getPinStyle(colId: string): string {
+function getPinClass(colId: string): string {
   if (colOffsetLeft[colId] !== undefined)
-    return `left:${colOffsetLeft[colId]}px;`
+    return `left-[${colOffsetLeft[colId]}px]`
   if (colOffsetRight[colId] !== undefined)
-    return `right:${colOffsetRight[colId]}px;`
+    return `right-[${colOffsetRight[colId]}px]`
   return ""
 }
 
@@ -486,20 +486,20 @@ function isPinned(colId: string): boolean {
   return colId in colOffsetLeft || colId in colOffsetRight
 }
 
-function getColumnSizeStyle(col: TableColumn): string {
+function getColumnSizeClasses(col: TableColumn): string[] {
   const colId = (col.id || col.accessorKey || "") as string
   const sizeVal = columnSizing[colId] ?? col.size
-  const styles: string[] = []
+  const classes: string[] = []
   if (sizeVal) {
-    styles.push(`width:${typeof sizeVal === "number" ? `${sizeVal}px` : sizeVal};`)
+    classes.push(typeof sizeVal === "number" ? `w-[${sizeVal}px]` : `w-[${sizeVal}]`)
   }
   if (col.minSize) {
-    styles.push(`min-width:${typeof col.minSize === "number" ? `${col.minSize}px` : col.minSize};`)
+    classes.push(typeof col.minSize === "number" ? `min-w-[${col.minSize}px]` : `min-w-[${col.minSize}]`)
   }
   if (col.maxSize) {
-    styles.push(`max-width:${typeof col.maxSize === "number" ? `${col.maxSize}px` : col.maxSize};`)
+    classes.push(typeof col.maxSize === "number" ? `max-w-[${col.maxSize}px]` : `max-w-[${col.maxSize}]`)
   }
-  return styles.join(" ")
+  return classes
 }
 ---
 
@@ -558,8 +558,7 @@ function getColumnSizeStyle(col: TableColumn): string {
       <colgroup>
         {visibleColumns.map((col) => {
           const colId = (col.id || col.accessorKey || "") as string
-          const sizeStyle = getColumnSizeStyle(col)
-          return <col data-col-id={colId} style={sizeStyle || undefined} />
+          return <col data-col-id={colId} class:list={[getColumnSizeClasses(col)]} />
         })}
       </colgroup>
 
@@ -580,10 +579,6 @@ function getColumnSizeStyle(col: TableColumn): string {
                 typeof col.meta?.class?.th === "function"
                   ? col.meta.class.th(col)
                   : col.meta?.class?.th || ""
-              const metaThStyle =
-                typeof col.meta?.style?.th === "function"
-                  ? col.meta.style.th(col)
-                  : col.meta?.style?.th || ""
               const canSort =
                 col.enableSorting !== false &&
                 !!(col.accessorKey || col.id || col.accessorFn) &&
@@ -595,12 +590,6 @@ function getColumnSizeStyle(col: TableColumn): string {
               const sortDir = activeSort ? (activeSort.desc ? "desc" : "asc") : "none"
               const headerSlotName = `${colId}-header`
 
-              const sizeStyle = getColumnSizeStyle(col)
-              const pinStyle = getPinStyle(colId)
-              const combinedStyle = [sizeStyle, pinStyle, metaThStyle]
-                .filter(Boolean)
-                .join("")
-
               const headerLabel =
                 typeof col.header === "string"
                   ? col.header
@@ -616,9 +605,10 @@ function getColumnSizeStyle(col: TableColumn): string {
                   class:list={[
                     classes.th,
                     pinned ? "sticky bg-default z-10" : "",
+                    getPinClass(colId),
+                    getColumnSizeClasses(col),
                     metaThClass
                   ]}
-                  style={combinedStyle || undefined}
                   data-col-id={colId}
                   data-slot="th"
                 >
@@ -731,8 +721,7 @@ function getColumnSizeStyle(col: TableColumn): string {
                 <tr class={classes.trGroup} data-slot="tr-group" data-group-id={group.id} data-depth={depth}>
                   <td
                     colspan={Math.max(1, visibleColumns.length)}
-                    class={classes.tdGroup}
-                    style={depth ? `padding-left: ${depth * 1.5 + 1}rem;` : undefined}
+                    class:list={[classes.tdGroup, depth ? `pl-[${depth * 1.5 + 1}rem]` : ""]}
                     data-slot="td-group"
                   >
                     {Astro.slots.has("group-header") ? (
@@ -762,10 +751,6 @@ function getColumnSizeStyle(col: TableColumn): string {
               typeof meta?.class?.tr === "function"
                 ? meta.class.tr(row)
                 : meta?.class?.tr || ""
-            const trMetaStyle =
-              typeof meta?.style?.tr === "function"
-                ? meta.style.tr(row)
-                : meta?.style?.tr || ""
             const isSelected = row.getIsSelected()
             const isExpanded = row.getIsExpanded()
             const isPinned_ = row.getIsPinned()
@@ -774,7 +759,6 @@ function getColumnSizeStyle(col: TableColumn): string {
               <>
                 <tr
                   class:list={[classes.tr, trMetaClass]}
-                  style={trMetaStyle || undefined}
                   data-slot="tr"
                   data-row-id={row.id}
                   data-row-index={row.index}
@@ -797,10 +781,6 @@ function getColumnSizeStyle(col: TableColumn): string {
                       typeof col.meta?.class?.td === "function"
                         ? col.meta.class.td(row)
                         : col.meta?.class?.td || ""
-                    const metaTdStyle =
-                      typeof col.meta?.style?.td === "function"
-                        ? col.meta.style.td(row)
-                        : col.meta?.style?.td || ""
                     const colSpanVal =
                       typeof col.meta?.colspan?.td === "function"
                         ? col.meta.colspan.td(row)
@@ -810,17 +790,14 @@ function getColumnSizeStyle(col: TableColumn): string {
                         ? col.meta.rowspan.td(row)
                         : col.meta?.rowspan?.td
 
-                    const pinStyle_ = getPinStyle(colId)
-                    const combinedTdStyle = [pinStyle_, metaTdStyle].filter(Boolean).join("")
-
                     return (
                       <td
                         class:list={[
                           classes.td,
                           pinned ? "sticky bg-default z-10" : "",
+                          getPinClass(colId),
                           metaTdClass
                         ]}
-                        style={combinedTdStyle || undefined}
                         colspan={colSpanVal}
                         rowspan={rowSpanVal}
                         data-slot="td"
@@ -927,10 +904,6 @@ function getColumnSizeStyle(col: TableColumn): string {
                             typeof col.meta?.class?.td === "function"
                               ? col.meta.class.td(subRow)
                               : col.meta?.class?.td || ""
-                          const metaTdStyle =
-                            typeof col.meta?.style?.td === "function"
-                              ? col.meta.style.td(subRow)
-                              : col.meta?.style?.td || ""
                           const colSpanVal =
                             typeof col.meta?.colspan?.td === "function"
                               ? col.meta.colspan.td(subRow)
@@ -940,18 +913,15 @@ function getColumnSizeStyle(col: TableColumn): string {
                               ? col.meta.rowspan.td(subRow)
                               : col.meta?.rowspan?.td
 
-                          const sizeStyle = getColumnSizeStyle(col)
-                          const pinStyle_ = getPinStyle(colId)
-                          const combinedTdStyle = [sizeStyle, pinStyle_, metaTdStyle].filter(Boolean).join("")
-
                           return (
                             <td
                               class:list={[
                                 classes.td,
                                 pinned ? "sticky bg-default z-10" : "",
+                                getPinClass(colId),
+                                getColumnSizeClasses(col),
                                 metaTdClass
                               ]}
-                              style={combinedTdStyle || undefined}
                               colspan={colSpanVal}
                               rowspan={rowSpanVal}
                               data-slot="td"