@serendie/ui 2.5.1 → 3.0.0-dev.202602191126

package/dist/components/CheckBox/CheckBox.js

@@ -40,9 +40,9 @@ const v = {
 }, N = {
   width: 24,
   height: 24,
-  color: "sd.system.color.component.outline",
+  color: "sd.system.color.component.outlineDim",
   _disabled: {
-    color: "color-mix(in srgb, {colors.sd.system.color.component.outline}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
+    color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
 }, n = b({
   slots: [
@@ -93,7 +93,7 @@ const v = {
       }
     }
   }
-}), H = ({
+}), F = ({
   value: m,
   label: l,
   helperText: s,
@@ -122,7 +122,7 @@ const v = {
   );
 };
 export {
-  H as CheckBox,
+  F as CheckBox,
   n as CheckBoxStyle,
   _ as checkboxCheckedIconCss,
   v as checkboxIconCss,

package/dist/components/DataTable/table/BodyCell.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { RecipeVariantProps } from '../../../../styled-system/css';
 declare const cellStyle: import('../../../../styled-system/types').RecipeRuntimeFn<{
     type: {
@@ -46,10 +47,11 @@ type ExtractVariantProperty<T, K extends string> = NonNullable<T> extends infer
 export type CellType = ExtractVariantProperty<CellStyleVariants, "type">;
 type CellState = ExtractVariantProperty<CellStyleVariants, "state">;
 type CellSize = ExtractVariantProperty<CellStyleVariants, "size">;
-export declare const BodyCell: React.FC<{
+export declare const BodyCell: React.ForwardRefExoticComponent<Omit<{
     children: React.ReactNode;
     size?: CellSize;
     type?: CellType | string;
     state?: CellState;
-}>;
+    className?: string;
+} & React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement>, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/components/DataTable/table/BodyCell.js

@@ -1,6 +1,8 @@
-import { jsx as c } from "react/jsx-runtime";
-import { cva as i } from "../../../styled-system/css/cva.js";
-const a = i({
+import { jsx as a } from "react/jsx-runtime";
+import l from "react";
+import { cx as m } from "../../../styled-system/css/cx.js";
+import { cva as d } from "../../../styled-system/css/cva.js";
+const p = d({
   base: {
     borderBottom: "1px solid",
     borderColor: "sd.system.color.component.outline",
@@ -100,26 +102,30 @@ const a = i({
     type: "default",
     state: "enabled"
   }
-}), l = ["default", "success", "notice", "error"], m = (o) => l.includes(o) ? o : "default", y = ({
-  children: o,
-  size: t = "medium",
-  type: r = "default",
-  state: e = "enabled",
-  ...n
-}) => {
-  const s = m(r);
-  return /* @__PURE__ */ c(
-    "td",
-    {
-      role: "cell",
-      "data-type": s,
-      "data-state": e,
-      className: a({ size: t, type: s, state: e }),
-      ...n,
-      children: o
-    }
-  );
-};
+}), y = ["default", "success", "notice", "error"], u = (o) => y.includes(o) ? o : "default", x = l.forwardRef(
+  ({
+    children: o,
+    size: t = "medium",
+    type: r = "default",
+    state: e = "enabled",
+    className: n,
+    ...c
+  }, i) => {
+    const s = u(r);
+    return /* @__PURE__ */ a(
+      "td",
+      {
+        ref: i,
+        role: "cell",
+        "data-type": s,
+        "data-state": e,
+        className: m(p({ size: t, type: s, state: e }), n),
+        ...c,
+        children: o
+      }
+    );
+  }
+);
 export {
-  y as BodyCell
+  x as BodyCell
 };

package/dist/components/DataTable/table/HeaderCell.d.ts

@@ -1,8 +1,11 @@
-export declare const HeaderCell: ({ children, size, state, sortable, sortDirection, onSort, className, ...props }: React.PropsWithChildren<{
+import { default as React } from 'react';
+export declare const HeaderCell: React.ForwardRefExoticComponent<Omit<{
     size?: "small" | "medium" | "large";
     state?: "enabled" | "hovered";
     sortable?: boolean;
     sortDirection?: "asc" | "desc" | false;
     onSort?: () => void;
     className?: string;
-}> & React.ComponentProps<"th">) => import("react/jsx-runtime").JSX.Element;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement>, "ref"> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/DataTable/table/HeaderCell.js

@@ -1,9 +1,10 @@
-import { jsx as l, jsxs as c } from "react/jsx-runtime";
-import { SerendieSymbol as a } from "@serendie/symbols";
-import { cx as p } from "../../../styled-system/css/cx.js";
-import { css as f } from "../../../styled-system/css/css.js";
-import { cva as y } from "../../../styled-system/css/cva.js";
-const u = y({
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import f from "react";
+import { SerendieSymbol as s } from "@serendie/symbols";
+import { cx as y } from "../../../styled-system/css/cx.js";
+import { css as u } from "../../../styled-system/css/css.js";
+import { cva as g } from "../../../styled-system/css/cva.js";
+const h = g({
   base: {
     borderBottom: "1px solid",
     borderColor: "sd.system.color.component.outline",
@@ -20,59 +21,68 @@ const u = y({
     whiteSpace: "nowrap"
   },
   defaultVariants: {}
-}), k = ({
-  children: i,
-  size: d = "medium",
-  state: m = "enabled",
-  sortable: e = !1,
-  sortDirection: n,
-  onSort: o,
-  className: r,
-  ...t
-}) => /* @__PURE__ */ l(
-  "th",
-  {
-    role: "columnheader",
-    "aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : e ? "none" : void 0,
-    tabIndex: e ? 0 : void 0,
-    onClick: e ? o : void 0,
-    onKeyDown: (s) => {
-      e && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), o == null || o());
-    },
-    className: p(u({ size: d, state: m }), r),
-    style: {
-      cursor: e ? "pointer" : "default",
-      userSelect: "none"
-    },
-    ...t,
-    children: /* @__PURE__ */ c(
-      "span",
-      {
-        className: f({
-          display: "inline-flex",
-          alignItems: "center",
-          verticalAlign: "middle"
-        }),
-        children: [
-          i,
-          e && (n === "asc" ? /* @__PURE__ */ l(
-            a,
-            {
-              name: "chevron-double-up",
-              style: { marginLeft: 4 }
-            }
-          ) : n === "desc" ? /* @__PURE__ */ l(
-            a,
-            {
-              name: "chevron-double-down",
-              style: { marginLeft: 4 }
-            }
-          ) : /* @__PURE__ */ l(a, { name: "chevron-up-down", style: { marginLeft: 4 } }))
-        ]
-      }
-    )
-  }
+}), A = f.forwardRef(
+  ({
+    children: i,
+    size: r = "medium",
+    state: d = "enabled",
+    sortable: e = !1,
+    sortDirection: n,
+    onSort: o,
+    className: t,
+    ...m
+  }, c) => /* @__PURE__ */ l(
+    "th",
+    {
+      ref: c,
+      role: "columnheader",
+      "aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : e ? "none" : void 0,
+      tabIndex: e ? 0 : void 0,
+      onClick: e ? o : void 0,
+      onKeyDown: (a) => {
+        e && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o == null || o());
+      },
+      className: y(h({ size: r, state: d }), t),
+      style: {
+        cursor: e ? "pointer" : "default",
+        userSelect: "none"
+      },
+      ...m,
+      children: /* @__PURE__ */ p(
+        "span",
+        {
+          className: u({
+            display: "inline-flex",
+            alignItems: "center",
+            verticalAlign: "middle"
+          }),
+          children: [
+            i,
+            e && (n === "asc" ? /* @__PURE__ */ l(
+              s,
+              {
+                name: "chevron-double-up",
+                style: { marginLeft: 4 }
+              }
+            ) : n === "desc" ? /* @__PURE__ */ l(
+              s,
+              {
+                name: "chevron-double-down",
+                style: { marginLeft: 4 }
+              }
+            ) : /* @__PURE__ */ l(
+              s,
+              {
+                name: "chevron-up-down",
+                style: { marginLeft: 4 }
+              }
+            ))
+          ]
+        }
+      )
+    }
+  )
 );
 export {
-  k as HeaderCell
+  A as HeaderCell
 };

package/dist/components/DataTable/table/HeaderRow.d.ts

@@ -1,11 +1,14 @@
+import { default as React } from 'react';
 import { HeaderGroup } from '@tanstack/react-table';
 export interface HeaderRowProps<TData> {
-    headerGroup: HeaderGroup<TData>;
+    headerGroup?: HeaderGroup<TData>;
     enableRowSelection?: boolean;
-    table: {
+    table?: {
         getIsAllRowsSelected: () => boolean;
         getIsSomeRowsSelected: () => boolean;
         getToggleAllRowsSelectedHandler: () => (event: unknown) => void;
     };
+    children?: React.ReactNode;
+    className?: string;
 }
-export declare function HeaderRow<TData>({ headerGroup, enableRowSelection, table, }: HeaderRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare const HeaderRow: <TData>(props: HeaderRowProps<TData> & React.RefAttributes<HTMLTableRowElement>) => JSX.Element | null;

package/dist/components/DataTable/table/HeaderRow.js

@@ -1,39 +1,42 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { flexRender as i } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { jsx as n, jsxs as g } from "react/jsx-runtime";
+import f from "react";
+import { flexRender as u } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { DataTable as t } from "../index.js";
-import { css as a } from "../../../styled-system/css/css.js";
-function f({
-  headerGroup: l,
-  enableRowSelection: n,
-  table: o
-}) {
-  return /* @__PURE__ */ m(t.Tr, { children: [
-    n && /* @__PURE__ */ r(
-      t.HeaderCheckbox,
+import { css as R } from "../../../styled-system/css/css.js";
+const w = ({
+  headerGroup: r,
+  enableRowSelection: d,
+  table: o,
+  children: l,
+  className: c
+}, s) => l ? /* @__PURE__ */ n(t.Tr, { ref: s, className: c, children: l }) : !r || !o ? null : /* @__PURE__ */ g(t.Tr, { ref: s, className: c, children: [
+  d && /* @__PURE__ */ n(
+    t.HeaderCheckbox,
+    {
+      checked: o.getIsSomeRowsSelected() ? "indeterminate" : !!o.getIsAllRowsSelected(),
+      onChange: o.getToggleAllRowsSelectedHandler(),
+      value: "select-all",
+      className: R({
+        verticalAlign: "middle"
+      })
+    }
+  ),
+  r.headers.map((e) => {
+    const i = e.column.getCanSort(), a = e.column.getIsSorted();
+    return /* @__PURE__ */ n(
+      t.HeaderCell,
       {
-        checked: o.getIsSomeRowsSelected() ? "indeterminate" : !!o.getIsAllRowsSelected(),
-        onChange: o.getToggleAllRowsSelectedHandler(),
-        value: "select-all",
-        className: a({
-          verticalAlign: "middle"
-        })
-      }
-    ),
-    l.headers.map((e) => {
-      const c = e.column.getCanSort(), s = e.column.getIsSorted();
-      return /* @__PURE__ */ r(
-        t.HeaderCell,
-        {
-          sortable: c,
-          sortDirection: s,
-          onSort: () => e.column.toggleSorting(),
-          children: i(e.column.columnDef.header, e.getContext())
-        },
-        e.id
-      );
-    })
-  ] }, l.id);
-}
+        sortable: i,
+        sortDirection: a,
+        onSort: () => e.column.toggleSorting(),
+        children: u(e.column.columnDef.header, e.getContext())
+      },
+      e.id
+    );
+  })
+] }, r.id), m = f.forwardRef(w);
+m.displayName = "HeaderRow";
+const T = m;
 export {
-  f as HeaderRow
+  T as HeaderRow
 };

package/dist/components/DataTable/table/Root.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export declare function Root({ children, className, }: {
+import { default as React, ReactNode } from 'react';
+export declare const Root: React.ForwardRefExoticComponent<Omit<{
     children: ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "className">, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/table/Root.js

@@ -1,7 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import { sva as s } from "../../../styled-system/css/sva.js";
-import { cx as a } from "../../../styled-system/css/cx.js";
-const l = s({
+import l from "react";
+import { sva as c } from "../../../styled-system/css/sva.js";
+import { cx as n } from "../../../styled-system/css/cx.js";
+const d = c({
   slots: ["container", "table"],
   base: {
     container: {
@@ -19,14 +20,10 @@ const l = s({
       borderSpacing: 0
     }
   }
+}), f = l.forwardRef(({ children: r, className: t, ...a }, s) => {
+  const o = d();
+  return /* @__PURE__ */ e("div", { ref: s, className: n(o.container, t), ...a, children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
 });
-function b({
-  children: r,
-  className: t
-}) {
-  const o = l();
-  return /* @__PURE__ */ e("div", { className: a(o.container, t), children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
-}
 export {
-  b as Root
+  f as Root
 };

package/dist/components/DataTable/table/Row.d.ts

@@ -1,5 +1,10 @@
+import { default as React } from 'react';
 import { Row as TanstackRow } from '@tanstack/react-table';
-export declare function Row<TData>({ row, enableRowSelection, }: {
-    row: TanstackRow<TData>;
+export interface RowProps<TData> {
+    row?: TanstackRow<TData>;
     enableRowSelection?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+    children?: React.ReactNode;
+    selected?: boolean;
+    className?: string;
+}
+export declare const Row: <TData>(props: RowProps<TData> & React.RefAttributes<HTMLTableRowElement>) => JSX.Element | null;

package/dist/components/DataTable/table/Row.js

@@ -1,8 +1,10 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { flexRender as l } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import u from "react";
+import { flexRender as y } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { DataTable as o } from "../index.js";
-import { cva as m } from "../../../styled-system/css/cva.js";
-const c = m({
+import { cx as l } from "../../../styled-system/css/cx.js";
+import { cva as g } from "../../../styled-system/css/cva.js";
+const m = g({
   base: {
     _hover: {
       _after: {
@@ -52,37 +54,47 @@ const c = m({
       }
     }
   }
-});
-function g({
-  row: e,
-  enableRowSelection: r
-}) {
-  return /* @__PURE__ */ i(
-    o.Tr,
-    {
-      className: c({
+}), v = ({ row: e, enableRowSelection: c, children: r, selected: d, className: s }, i) => r ? /* @__PURE__ */ n(
+  o.Tr,
+  {
+    ref: i,
+    className: l(
+      m({ state: d ? "selected" : void 0 }),
+      s
+    ),
+    children: r
+  }
+) : e ? /* @__PURE__ */ f(
+  o.Tr,
+  {
+    ref: i,
+    className: l(
+      m({
         state: e.getIsSelected() ? "selected" : void 0
       }),
-      children: [
-        r && /* @__PURE__ */ n(
-          o.BodyCheckbox,
-          {
-            checked: e.getIsSelected(),
-            onChange: e.getToggleSelectedHandler(),
-            value: e.id
-          }
-        ),
-        e.getVisibleCells().map((t) => {
-          const s = a(t);
-          return /* @__PURE__ */ n(o.BodyCell, { type: s, children: l(t.column.columnDef.cell, t.getContext()) }, t.id);
-        })
-      ]
-    }
-  );
-}
-function a(e) {
+      s
+    ),
+    children: [
+      c && /* @__PURE__ */ n(
+        o.BodyCheckbox,
+        {
+          checked: e.getIsSelected(),
+          onChange: e.getToggleSelectedHandler(),
+          value: e.id
+        }
+      ),
+      e.getVisibleCells().map((t) => {
+        const p = x(t);
+        return /* @__PURE__ */ n(o.BodyCell, { type: p, children: y(t.column.columnDef.cell, t.getContext()) }, t.id);
+      })
+    ]
+  }
+) : null, a = u.forwardRef(v);
+a.displayName = "Row";
+const w = a;
+function x(e) {
   return e.column.columnDef.meta && "getType" in e.column.columnDef.meta && typeof e.column.columnDef.meta.getType == "function" ? e.column.columnDef.meta.getType(e.row.original) : "default";
 }
 export {
-  g as Row
+  w as Row
 };

package/dist/components/DataTable/table/Tbody.d.ts

@@ -1 +1,2 @@
-export declare function Tbody({ children, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+export declare const Tbody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/components/DataTable/table/Tbody.js

@@ -1,7 +1,6 @@
-import { jsx as t } from "react/jsx-runtime";
-function b({ children: o, ...r }) {
-  return /* @__PURE__ */ t("tbody", { ...r, children: o });
-}
+import { jsx as e } from "react/jsx-runtime";
+import f from "react";
+const a = f.forwardRef(({ children: o, ...r }, t) => /* @__PURE__ */ e("tbody", { ref: t, ...r, children: o }));
 export {
-  b as Tbody
+  a as Tbody
 };

package/dist/components/DataTable/table/Thead.d.ts

@@ -1 +1,2 @@
-export declare function Thead({ children, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+export declare const Thead: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/components/DataTable/table/Thead.js

@@ -1,7 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-function n({ children: r, ...t }) {
-  return /* @__PURE__ */ e("thead", { ...t, children: r });
-}
+import { jsx as o } from "react/jsx-runtime";
+import a from "react";
+const m = a.forwardRef(({ children: r, ...t }, e) => /* @__PURE__ */ o("thead", { ref: e, ...t, children: r }));
 export {
-  n as Thead
+  m as Thead
 };

package/dist/components/DataTable/table/Tr.d.ts

@@ -1 +1,2 @@
-export declare function Tr({ children, className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+export declare const Tr: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/components/DataTable/table/Tr.js

@@ -1,26 +1,22 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cx as m } from "../../../styled-system/css/cx.js";
-import { css as e } from "../../../styled-system/css/css.js";
-function f({
-  children: r,
-  className: o,
-  ...t
-}) {
-  return /* @__PURE__ */ i(
-    "tr",
-    {
-      role: "row",
-      className: m(
-        e({
-          position: "relative"
-        }),
-        o
-      ),
-      ...t,
-      children: r
-    }
-  );
-}
+import { jsx as m } from "react/jsx-runtime";
+import f from "react";
+import { cx as i } from "../../../styled-system/css/cx.js";
+import { css as s } from "../../../styled-system/css/css.js";
+const n = f.forwardRef(({ children: r, className: o, ...t }, e) => /* @__PURE__ */ m(
+  "tr",
+  {
+    ref: e,
+    role: "row",
+    className: i(
+      s({
+        position: "relative"
+      }),
+      o
+    ),
+    ...t,
+    children: r
+  }
+));
 export {
-  f as Tr
+  n as Tr
 };

package/dist/components/DatePicker/styles.js

@@ -21,7 +21,7 @@ const o = e({
       zIndex: "sd.system.elevation.zIndex.dropdown"
     },
     content: {
-      background: "sd.system.color.component.surface",
+      background: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
       boxShadow: "sd.system.elevation.shadow.level1",
       flexDirection: "column",

package/dist/components/Divider/Divider.d.ts

@@ -3,10 +3,10 @@ import { RecipeVariantProps } from '../../../styled-system/css';
 export declare const DividerStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     color: {
         light: {
-            borderColor: "sd.reference.color.scale.gray.200";
+            borderColor: "sd.system.color.component.outlineBright";
         };
         normal: {
-            borderColor: "sd.reference.color.scale.gray.300";
+            borderColor: "sd.system.color.component.outline";
         };
         dark: {
             borderColor: "sd.system.color.component.outlineDim";