@serendie/ui 3.2.1 → 3.2.2-dev.202604270058

package/dist/client.js

@@ -3,7 +3,7 @@ import { SerendiePreset as r } from "./preset.js";
 import { ThemeContext as a, resolveTheme as m, useThemeContext as p } from "./theme/ThemeContext.js";
 import { useSystemColorScheme as x } from "./theme/useSystemColorScheme.js";
 import { ColorSchemeScript as s, getColorSchemeScript as f } from "./theme/initColorScheme.js";
-import { formatDateByLang as l, getTranslations as d, useTranslations as h } from "./i18n/index.js";
+import { formatDateByLang as l, getTranslations as d, useTranslations as S } from "./i18n/index.js";
 import { Accordion as C } from "./components/Accordion/Accordion.js";
 import { AccordionGroup as u } from "./components/Accordion/AccordionGroup.js";
 import { Avatar as y, AvatarStyle as T } from "./components/Avatar/Avatar.js";
@@ -20,7 +20,7 @@ import { DashboardWidget as po } from "./components/DashboardWidget/DashboardWid
 import { DataTable as xo } from "./components/DataTable/index.js";
 import { DatePicker as so } from "./components/DatePicker/DatePicker.js";
 import { Divider as co, DividerStyle as lo } from "./components/Divider/Divider.js";
-import { Drawer as So } from "./components/Drawer/Drawer.js";
+import { Drawer as ho } from "./components/Drawer/Drawer.js";
 import { DropdownMenu as go, DropdownMenuStyle as uo } from "./components/DropdownMenu/DropdownMenu.js";
 import { IconButton as yo, IconButtonStyle as To } from "./components/IconButton/IconButton.js";
 import { List as Po } from "./components/List/List.js";
@@ -35,17 +35,18 @@ import { RadioButton as Eo, RadioButtonStyle as Ho, radioCheckedIconCss as Jo, r
 import { RadioGroup as Vo } from "./components/RadioButton/RadioGroup.js";
 import { Search as Yo, SearchStyle as Zo } from "./components/Search/Search.js";
 import { Select as $o, SelectStyle as oe } from "./components/Select/Select.js";
-import { Switch as re, SwitchStyle as te } from "./components/Switch/Switch.js";
-import { Tabs as me, TabsStyle as pe } from "./components/Tabs/Tabs.js";
-import { TabItem as xe, TabItemStyle as ne } from "./components/Tabs/TabItem.js";
-import { TextArea as fe } from "./components/TextArea/TextArea.js";
-import { TextField as le } from "./components/TextField/TextField.js";
-import { Toast as he, ToastStyle as Se, toaster as Ce } from "./components/Toast/Toast.js";
-import { Tooltip as ue } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as ye } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as Ie } from "./components/DataTable/DataTableComponent.js";
-import { LanguageProvider as De, SerendieProvider as be } from "./i18n/provider.js";
-import { parse as ve } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
+import { Slider as re, SliderStyle as te } from "./components/Slider/Slider.js";
+import { Switch as me, SwitchStyle as pe } from "./components/Switch/Switch.js";
+import { Tabs as xe, TabsStyle as ne } from "./components/Tabs/Tabs.js";
+import { TabItem as fe, TabItemStyle as ce } from "./components/Tabs/TabItem.js";
+import { TextArea as de } from "./components/TextArea/TextArea.js";
+import { TextField as he } from "./components/TextField/TextField.js";
+import { Toast as ge, ToastStyle as ue, toaster as Be } from "./components/Toast/Toast.js";
+import { Tooltip as Te } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as Pe } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as be } from "./components/DataTable/DataTableComponent.js";
+import { LanguageProvider as ve, SerendieProvider as Me } from "./i18n/provider.js";
+import { parse as Ae } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
 export {
   C as Accordion,
   u as AccordionGroup,
@@ -67,16 +68,16 @@ export {
   s as ColorSchemeScript,
   po as DashboardWidget,
   xo as DataTable,
-  Ie as DataTableComponent,
+  be as DataTableComponent,
   so as DatePicker,
   co as Divider,
   lo as DividerStyle,
-  So as Drawer,
+  ho as Drawer,
   go as DropdownMenu,
   uo as DropdownMenuStyle,
   yo as IconButton,
   To as IconButtonStyle,
-  De as LanguageProvider,
+  ve as LanguageProvider,
   Po as List,
   bo as ListItem,
   ko as ListItemStyle,
@@ -96,20 +97,22 @@ export {
   oe as SelectStyle,
   W as SerendieChartTheme,
   r as SerendiePreset,
-  be as SerendieProvider,
-  re as Switch,
-  te as SwitchStyle,
-  xe as TabItem,
-  ne as TabItemStyle,
-  me as Tabs,
-  pe as TabsStyle,
-  fe as TextArea,
-  le as TextField,
+  Me as SerendieProvider,
+  re as Slider,
+  te as SliderStyle,
+  me as Switch,
+  pe as SwitchStyle,
+  fe as TabItem,
+  ce as TabItemStyle,
+  xe as Tabs,
+  ne as TabsStyle,
+  de as TextArea,
+  he as TextField,
   a as ThemeContext,
-  he as Toast,
-  Se as ToastStyle,
-  ue as Tooltip,
-  ye as TopAppBar,
+  ge as Toast,
+  ue as ToastStyle,
+  Te as Tooltip,
+  Pe as TopAppBar,
   $ as checkboxCheckedIconCss,
   oo as checkboxIconCss,
   eo as checkboxUncheckedIconCss,
@@ -121,18 +124,18 @@ export {
   f as getColorSchemeScript,
   d as getTranslations,
   J as legendChartMargin,
-  ve as parseDate,
+  Ae as parseDate,
   Jo as radioCheckedIconCss,
   Ko as radioIconCss,
   Oo as radioUncheckedIconCss,
   m as resolveTheme,
   K as spaciousChartMargin,
-  Ce as toaster,
+  Be as toaster,
   O as useBarChartProps,
   Q as useChartProps,
   V as useLineChartProps,
   X as usePieChartProps,
   x as useSystemColorScheme,
   p as useThemeContext,
-  h as useTranslations
+  S as useTranslations
 };

package/dist/components/BottomNavigation/BottomNavigation.js

@@ -1,29 +1,30 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cx as r } from "../../styled-system/css/cx.js";
+import { jsx as r } from "react/jsx-runtime";
+import { cx as s } from "../../styled-system/css/cx.js";
 import { css as i } from "../../styled-system/css/css.js";
-const a = ({
+const p = ({
   children: o,
-  className: s,
-  ...t
-}) => /* @__PURE__ */ e(
+  className: t,
+  ...e
+}) => /* @__PURE__ */ r(
   "nav",
   {
-    className: r(
+    className: s(
       i({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-around",
         height: 64,
         paddingX: "sd.system.dimension.spacing.medium",
-        borderTop: "1px solid",
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
         borderTopColor: "sd.system.color.component.outline"
       }),
-      s
+      t
     ),
-    ...t,
+    ...e,
     children: o
   }
 );
 export {
-  a as BottomNavigation
+  p as BottomNavigation
 };

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

@@ -4,8 +4,9 @@ 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",
+    borderBottomWidth: "1px",
+    borderBottomStyle: "solid",
+    borderBottomColor: "sd.system.color.component.outline",
     fontFamily: "Roboto, sans-serif",
     color: "sd.system.color.component.onSurface",
     textAlign: "left",

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

@@ -1,13 +1,14 @@
 import { jsx as l, jsxs as p } from "react/jsx-runtime";
 import f from "react";
-import { SerendieSymbol as s } from "@serendie/symbols";
+import { SerendieSymbol as a } from "@serendie/symbols";
 import { css as y } from "../../../styled-system/css/css.js";
 import { cx as u } from "../../../styled-system/css/cx.js";
 import { cva as g } from "../../../styled-system/css/cva.js";
 const h = g({
   base: {
-    borderBottom: "1px solid",
-    borderColor: "sd.system.color.component.outline",
+    borderBottomWidth: "1px",
+    borderBottomStyle: "solid",
+    borderBottomColor: "sd.system.color.component.outline",
     fontFamily: "Roboto, sans-serif",
     color: "sd.system.color.component.onSurface",
     textAlign: "left",
@@ -23,13 +24,13 @@ const h = g({
   defaultVariants: {}
 }), A = f.forwardRef(
   ({
-    children: i,
+    children: s,
     size: r = "medium",
     state: d = "enabled",
     sortable: e = !1,
     sortDirection: n,
     onSort: o,
-    className: t,
+    className: i,
     ...m
   }, c) => /* @__PURE__ */ l(
     "th",
@@ -39,10 +40,10 @@ const h = g({
       "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());
+      onKeyDown: (t) => {
+        e && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o == null || o());
       },
-      className: u(h({ size: r, state: d }), t),
+      className: u(h({ size: r, state: d }), i),
       style: {
         cursor: e ? "pointer" : "default",
         userSelect: "none"
@@ -57,21 +58,21 @@ const h = g({
             verticalAlign: "middle"
           }),
           children: [
-            i,
+            s,
             e && (n === "asc" ? /* @__PURE__ */ l(
-              s,
+              a,
               {
                 name: "chevron-double-up",
                 style: { marginLeft: 4 }
               }
             ) : n === "desc" ? /* @__PURE__ */ l(
-              s,
+              a,
               {
                 name: "chevron-double-down",
                 style: { marginLeft: 4 }
               }
             ) : /* @__PURE__ */ l(
-              s,
+              a,
               {
                 name: "chevron-up-down",
                 style: { marginLeft: 4 }

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

@@ -1,12 +1,13 @@
 import { jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { cx as c } from "../../../styled-system/css/cx.js";
-import { sva as n } from "../../../styled-system/css/sva.js";
-const d = n({
+import { sva as d } from "../../../styled-system/css/sva.js";
+const n = d({
   slots: ["container", "table"],
   base: {
     container: {
-      border: "1px solid",
+      borderWidth: "1px",
+      borderStyle: "solid",
       borderColor: "sd.system.color.component.outline",
       borderRadius: "4px",
       overflow: "hidden",
@@ -21,7 +22,7 @@ const d = n({
     }
   }
 }), f = l.forwardRef(({ children: r, className: t, ...a }, s) => {
-  const o = d();
+  const o = n();
   return /* @__PURE__ */ e("div", { ref: s, className: c(o.container, t), ...a, children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
 });
 export {

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,47 @@
+import { Slider as ArkSlider, SliderRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../../styled-system/css';
+export declare const SliderStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"marker" | "label" | "track" | "root" | "labels" | "range" | "control" | "labelEnd" | "thumb" | "markerGroup" | "markerInRange" | "markerAfterRange", {
+    size: {
+        medium: {
+            track: {
+                height: number;
+            };
+            thumb: {
+                width: number;
+                height: number;
+            };
+            marker: {
+                width: number;
+                height: number;
+            };
+        };
+        large: {
+            track: {
+                height: number;
+            };
+            thumb: {
+                width: number;
+                height: number;
+            };
+            marker: {
+                width: number;
+                height: number;
+            };
+        };
+    };
+}>;
+type SliderItemProps = {
+    startLabel?: string;
+    endLabel?: string;
+    /** Custom marker positions for display only (does not affect snapping). Defaults to 10% increments. */
+    markerValues?: number[];
+    /** Whether to show markers on the track. Defaults to true. */
+    showMarkers?: boolean;
+    /** Step value for the slider. Defaults to 1. */
+    step?: number;
+};
+export type SliderProps = SliderRootProps & RecipeVariantProps<typeof SliderStyle> & SliderItemProps;
+export declare const Slider: import('react').ForwardRefExoticComponent<ArkSlider.RootProps & {
+    size?: "large" | "medium" | undefined;
+} & SliderItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Slider/Slider.js

@@ -0,0 +1,232 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { slider_exports as o } from "../../node_modules/@ark-ui/react/dist/components/slider/slider.js";
+import { forwardRef as S } from "react";
+import { Tooltip as R } from "../Tooltip/Tooltip.js";
+import { cx as u } from "../../styled-system/css/cx.js";
+import { sva as w } from "../../styled-system/css/sva.js";
+const p = w({
+  slots: [
+    "root",
+    "labels",
+    "label",
+    "labelEnd",
+    "control",
+    "track",
+    "range",
+    "thumb",
+    "markerGroup",
+    "marker",
+    "markerInRange",
+    "markerAfterRange"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.small",
+      width: "100%"
+    },
+    labels: {
+      display: "flex",
+      justifyContent: "space-between",
+      width: "100%"
+    },
+    label: {
+      color: "sd.system.color.component.onSurface",
+      textStyle: "sd.system.typography.body.medium_compact",
+      _disabled: {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    },
+    labelEnd: {
+      color: "sd.system.color.component.onSurface",
+      textStyle: "sd.system.typography.body.medium_compact",
+      "[data-disabled] &": {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    },
+    control: {
+      position: "relative",
+      width: "100%"
+    },
+    track: {
+      position: "relative",
+      width: "100%",
+      backgroundColor: "sd.system.color.component.outlineBright",
+      borderRadius: "sd.system.dimension.radius.full",
+      cursor: "pointer",
+      zIndex: 0,
+      _disabled: {
+        backgroundColor: "sd.system.color.interaction.disabled",
+        cursor: "default"
+      }
+    },
+    range: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      backgroundColor: "sd.system.color.impression.secondary",
+      borderRadius: "sd.system.dimension.radius.full",
+      height: "100%",
+      zIndex: 1,
+      _disabled: {
+        backgroundColor: "sd.system.color.interaction.disabledOnSurface"
+      }
+    },
+    thumb: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      top: "50%",
+      "--slider-thumb-transform": "translate(-50%, -50%)",
+      backgroundColor: "sd.system.color.impression.primary",
+      borderRadius: "sd.system.dimension.radius.full",
+      borderWidth: 0,
+      cursor: "pointer",
+      outline: "none",
+      zIndex: 2,
+      "&:hover:not(:focus-visible):not([data-disabled]), &[data-dragging]:not([data-disabled])": {
+        backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)"
+      },
+      "&:focus": {
+        outline: "none"
+      },
+      "&:focus-visible": {
+        backgroundColor: "sd.system.color.component.surface",
+        borderWidth: 1,
+        borderColor: "sd.system.color.impression.primary",
+        boxShadow: "none",
+        outline: "none"
+      },
+      _disabled: {
+        backgroundColor: "sd.system.color.interaction.disabledOnSurface",
+        cursor: "default"
+      }
+    },
+    markerGroup: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: 2
+    },
+    marker: {
+      position: "absolute",
+      width: 2,
+      height: 2,
+      borderRadius: "sd.system.dimension.radius.full",
+      transform: "translate(-50%, -50%)",
+      top: "50%"
+    },
+    markerInRange: {
+      backgroundColor: "sd.system.color.impression.primary",
+      _disabled: {
+        backgroundColor: "sd.system.color.interaction.disabledOnSurface"
+      }
+    },
+    markerAfterRange: {
+      backgroundColor: "sd.system.color.interaction.disabledOnSurface"
+    }
+  },
+  variants: {
+    size: {
+      medium: {
+        track: {
+          height: 4
+        },
+        thumb: {
+          width: 16,
+          height: 16
+        },
+        marker: {
+          width: 2,
+          height: 2
+        }
+      },
+      large: {
+        track: {
+          height: 8
+        },
+        thumb: {
+          width: 24,
+          height: 24
+        },
+        marker: {
+          width: 4,
+          height: 4
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+}), v = S(
+  ({
+    startLabel: d,
+    endLabel: l,
+    markerValues: a,
+    showMarkers: b = !0,
+    step: h = 1,
+    className: g,
+    min: n = 0,
+    max: c = 100,
+    ...y
+  }, f) => {
+    const [k, m] = p.splitVariantProps(y), e = p(k), x = a != null && a.length ? a.filter((s) => s > n && s < c) : Array.from({ length: 9 }, (s, t) => n + (c - n) * (t + 1) / 10);
+    return /* @__PURE__ */ i(
+      o.Root,
+      {
+        ref: f,
+        className: u(e.root, g),
+        min: n,
+        max: c,
+        step: h,
+        ...m,
+        children: [
+          (d || l) && /* @__PURE__ */ i("div", { className: e.labels, children: [
+            d && /* @__PURE__ */ r(o.Label, { className: e.label, children: d }),
+            l && /* @__PURE__ */ r("span", { className: e.labelEnd, children: l })
+          ] }),
+          /* @__PURE__ */ i(o.Control, { className: e.control, children: [
+            /* @__PURE__ */ i(o.Track, { className: e.track, children: [
+              /* @__PURE__ */ r(o.Range, { className: e.range }),
+              b && /* @__PURE__ */ r(o.Context, { children: (s) => /* @__PURE__ */ r(o.MarkerGroup, { className: e.markerGroup, children: x.map((t) => {
+                const C = t <= s.value[0];
+                return /* @__PURE__ */ r(
+                  o.Marker,
+                  {
+                    value: t,
+                    className: u(
+                      e.marker,
+                      C ? e.markerInRange : e.markerAfterRange
+                    )
+                  },
+                  t
+                );
+              }) }) })
+            ] }),
+            /* @__PURE__ */ r(o.Context, { children: (s) => /* @__PURE__ */ r(
+              R,
+              {
+                content: String(s.value[0]),
+                placement: "top",
+                openDelay: 0,
+                closeDelay: 0,
+                disabled: m.disabled || s.dragging,
+                children: /* @__PURE__ */ r(o.Thumb, { index: 0, className: e.thumb, children: /* @__PURE__ */ r(o.HiddenInput, {}) })
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+v.displayName = "Slider";
+export {
+  v as Slider,
+  p as SliderStyle
+};

package/dist/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export * from './Slider.tsx';

package/dist/components/Slider/index.js

@@ -0,0 +1,5 @@
+import { Slider as l, SliderStyle as S } from "./Slider.js";
+export {
+  l as Slider,
+  S as SliderStyle
+};

package/dist/components/Tabs/TabItem.js

@@ -2,8 +2,8 @@ import { jsxs as y, jsx as o } from "react/jsx-runtime";
 import { tabs_exports as b } from "../../node_modules/@ark-ui/react/dist/components/tabs/tabs.js";
 import { NotificationBadge as i } from "../NotificationBadge/NotificationBadge.js";
 import { cx as u } from "../../styled-system/css/cx.js";
-import { sva as x } from "../../styled-system/css/sva.js";
-const l = x({
+import { sva as h } from "../../styled-system/css/sva.js";
+const l = h({
   slots: ["trigger", "dot", "badgeBox", "badge"],
   base: {
     trigger: {
@@ -18,7 +18,8 @@ const l = x({
       transitionDuration: ".2s",
       transitionProperty: "color, border-color",
       transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
-      borderBottom: "2px solid",
+      borderBottomWidth: "2px",
+      borderBottomStyle: "solid",
       borderBottomColor: "transparent",
       textStyle: "sd.system.typography.label.large_compact",
       _expanded: {
@@ -58,30 +59,30 @@ const l = x({
       backgroundColor: "color-mix(in srgb, {colors.sd.system.color.interaction.hoveredOnPrimary}, {colors.sd.system.color.impression.negativeContainer});"
     }
   }
-}), B = ({
+}), v = ({
   title: n,
   value: a,
-  disabled: r,
+  disabled: t,
   dot: c,
-  badge: t,
+  badge: r,
   className: d,
   ...m
 }) => {
-  const [p, g] = l.splitVariantProps(m), e = l(p), s = r ? e.badge : "";
+  const [p, g] = l.splitVariantProps(m), e = l(p), s = t ? e.badge : "";
   return /* @__PURE__ */ y(
     b.Trigger,
     {
       value: a,
       className: u(e.trigger, d),
-      disabled: r,
+      disabled: t,
       ...g,
       children: [
         /* @__PURE__ */ o("span", { children: n }),
         c && /* @__PURE__ */ o("div", { className: e.dot, children: /* @__PURE__ */ o(i, { noNumber: !0, className: s }) }),
-        t && /* @__PURE__ */ o("div", { className: e.badgeBox, children: /* @__PURE__ */ o(
+        r && /* @__PURE__ */ o("div", { className: e.badgeBox, children: /* @__PURE__ */ o(
           i,
           {
-            count: t,
+            count: r,
             size: "small",
             className: s
           }
@@ -91,6 +92,6 @@ const l = x({
   );
 };
 export {
-  B as TabItem,
+  v as TabItem,
   l as TabItemStyle
 };

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export * from './components/ProgressIndicator/index.ts';
 export * from './components/RadioButton/index.ts';
 export * from './components/Search/index.ts';
 export * from './components/Select/index.ts';
+export * from './components/Slider/index.ts';
 export * from './components/Switch/index.ts';
 export * from './components/Tabs/index.ts';
 export * from './components/TextArea/index.ts';