@serendie/ui 2.1.3 → 2.2.0-dev.202509240917

package/dist/components/DatePicker/styles.js

@@ -0,0 +1,224 @@
+import { sva as e } from "../../styled-system/css/sva.js";
+const o = e({
+  slots: [
+    "positioner",
+    "content",
+    "view",
+    "viewControl",
+    "prevTrigger",
+    "nextTrigger",
+    "table",
+    "tableHeader",
+    "tableCell",
+    "tableCellTrigger",
+    "select",
+    "selectWrapper",
+    "selectIcon"
+  ],
+  base: {
+    positioner: {
+      position: "relative",
+      zIndex: "sd.system.elevation.zIndex.dropdown"
+    },
+    content: {
+      background: "sd.system.color.component.surface",
+      borderRadius: "sd.system.dimension.radius.medium",
+      boxShadow: "sd.system.elevation.shadow.level1",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.small",
+      p: "sd.system.dimension.spacing.small",
+      width: "fit-content",
+      zIndex: "sd.system.elevation.zIndex.dropdown",
+      _open: {
+        display: "flex",
+        animation: "fadeIn 0.25s ease-out"
+      },
+      _closed: {
+        display: "none",
+        animation: "fadeOut 0.2s ease-out"
+      }
+    },
+    view: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.small",
+      _hidden: {
+        display: "none"
+      }
+    },
+    viewControl: {
+      display: "flex",
+      gap: "sd.system.dimension.spacing.extraSmall",
+      justifyContent: "space-between",
+      alignItems: "center",
+      h: "40px",
+      px: "sd.system.dimension.spacing.twoExtraSmall"
+    },
+    select: {
+      appearance: "none",
+      paddingRight: "30px"
+    },
+    selectWrapper: {
+      position: "relative",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    selectIcon: {
+      position: "absolute",
+      right: "0",
+      top: "50%",
+      transform: "translateY(-50%)",
+      pointerEvents: "none"
+    },
+    prevTrigger: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "inline-flex",
+      justifyContent: "center",
+      borderRadius: "sd.system.dimension.radius.medium",
+      color: "sd.system.color.component.onSurface",
+      _hover: {
+        bg: "sd.system.color.interaction.hoveredVariant"
+      }
+    },
+    nextTrigger: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "inline-flex",
+      justifyContent: "center",
+      borderRadius: "sd.system.dimension.radius.medium",
+      color: "sd.system.color.component.onSurface",
+      _hover: {
+        bg: "sd.system.color.interaction.hoveredVariant"
+      }
+    },
+    table: {
+      width: "full",
+      borderCollapse: "separate",
+      borderSpacing: "0"
+    },
+    tableHeader: {
+      color: "sd.system.color.component.onSurfaceVariant",
+      fontWeight: "normal",
+      h: "40px",
+      textStyle: "sd.system.typography.body.small_compact",
+      textAlign: "center"
+    },
+    tableCell: {
+      textAlign: "center",
+      p: "0",
+      position: "relative"
+    },
+    tableCellTrigger: {
+      alignItems: "center",
+      borderRadius: "sd.system.dimension.radius.full",
+      cursor: "pointer",
+      display: "inline-flex",
+      fontVariantNumeric: "tabular-nums",
+      justifyContent: "center",
+      h: "40px",
+      w: "40px",
+      position: "relative",
+      color: "sd.system.color.component.onSurface",
+      border: "none",
+      background: "transparent",
+      textStyle: "sd.system.typography.body.small_compact",
+      zIndex: "2",
+      _hover: {
+        _before: {
+          bg: "sd.system.color.interaction.hoveredVariant"
+        }
+      },
+      _before: {
+        content: "''",
+        position: "absolute",
+        inset: "0",
+        zIndex: "-1",
+        borderRadius: "sd.system.dimension.radius.full"
+      },
+      _today: {
+        _before: {
+          borderWidth: "sd.system.dimension.border.medium",
+          borderColor: "sd.system.color.component.outline",
+          borderStyle: "solid"
+        },
+        "&[data-in-range]": {
+          _before: {
+            borderColor: "sd.reference.color.scale.white.1000"
+          }
+        }
+      },
+      "&[data-in-range]": {
+        bg: "sd.system.color.interaction.selectedSurface",
+        borderRadius: "0px"
+      },
+      "&[data-in-range]&[data-in-hover-range]": {
+        bg: "sd.system.color.interaction.hoveredVariant"
+      },
+      "&[data-hover-range-start]": {
+        bg: "sd.system.color.interaction.hoveredVariant",
+        borderTopLeftRadius: "sd.system.dimension.radius.full",
+        borderBottomLeftRadius: "sd.system.dimension.radius.full",
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
+      },
+      "&[data-hover-range-end]": {
+        bg: "sd.system.color.interaction.hoveredVariant",
+        borderTopRightRadius: "sd.system.dimension.radius.full",
+        borderBottomRightRadius: "sd.system.dimension.radius.full",
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px"
+      },
+      "&[data-hover-range-start]&[data-hover-range-end]": {
+        borderTopLeftRadius: "sd.system.dimension.radius.full",
+        borderBottomLeftRadius: "sd.system.dimension.radius.full",
+        borderTopRightRadius: "sd.system.dimension.radius.full",
+        borderBottomRightRadius: "sd.system.dimension.radius.full"
+      },
+      "&[data-range-start]": {
+        borderTopLeftRadius: "sd.system.dimension.radius.full",
+        borderBottomLeftRadius: "sd.system.dimension.radius.full"
+      },
+      "&[data-range-end]": {
+        borderTopRightRadius: "sd.system.dimension.radius.full",
+        borderBottomRightRadius: "sd.system.dimension.radius.full"
+      },
+      _selected: {
+        color: "sd.system.color.impression.onPrimaryContainer",
+        _hover: {
+          _before: {
+            background: "sd.system.color.impression.primaryContainer"
+          }
+        },
+        _before: {
+          background: "sd.system.color.impression.primaryContainer"
+        },
+        zIndex: "100"
+      },
+      _disabled: {
+        color: "sd.system.color.interaction.disabledOnSurface",
+        cursor: "not-allowed",
+        _hover: {
+          _before: {
+            background: "transparent"
+          }
+        }
+      },
+      _unavailable: {
+        color: "sd.system.color.interaction.disabledOnSurface",
+        cursor: "not-allowed",
+        textDecoration: "line-through",
+        _hover: {
+          _before: {
+            background: "transparent"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {}
+});
+export {
+  o as datePickerStyles
+};

package/dist/components/IconButton/IconButton.d.ts

@@ -92,19 +92,19 @@ type CircleLargeProps = {
 export declare const IconButton: React.ForwardRefExoticComponent<(Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "medium" | "small" | "large" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & RectangleProps, "ref"> | Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "medium" | "small" | "large" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & CircleProps, "ref"> | Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "medium" | "small" | "large" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & CircleLargeProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/List/ListItem.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
+export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "description" | "title" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
     isLargeLeftIcon: {
         true: {
             leftIcon: {

package/dist/components/ModalDialog/ModalDialog.d.ts

@@ -1,6 +1,6 @@
 import { DialogRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const ModalDialogStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
+declare const ModalDialogStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
 type Props = {
     isOpen: boolean;
     title: string;

package/dist/components/NotificationBadge/NotificationBadge.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const NotificationBadgeStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"text" | "root", {
+declare const NotificationBadgeStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "text", {
     size: {
         small: {
             root: {

package/dist/components/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const PaginationStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "root" | "ellipsis" | "prevTrigger" | "nextTrigger", {
+export declare const PaginationStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "item" | "ellipsis" | "prevTrigger" | "nextTrigger", {
     size: {
         medium: {
             root: {

package/dist/components/Pagination/Pagination.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as T, Fragment as g } from "react/jsx-runtime";
-import { SerendieSymbolChevronLeft as S, SerendieSymbolChevronRight as _ } from "@serendie/symbols";
-import C, { useState as I } from "react";
+import { SerendieSymbolChevronLeft as S, SerendieSymbolChevronRight as C } from "@serendie/symbols";
+import _, { useState as I } from "react";
 import { IconButton as m } from "../IconButton/IconButton.js";
 import { sva as N } from "../../styled-system/css/sva.js";
 import { PaginationRoot as j } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
@@ -22,14 +22,10 @@ const L = N({
       height: 32,
       minWidth: 32,
       margin: 0,
-      "& button": {
-        color: "sd.system.color.impression.primary"
-      },
+      color: "sd.system.color.impression.primary",
       "&[data-selected]": {
-        "& button": {
-          color: "sd.system.color.interaction.disabledOnSurface",
-          fontWeight: "bold"
-        }
+        color: "sd.system.color.interaction.disabledOnSurface",
+        fontWeight: "bold"
       }
     },
     ellipsis: {
@@ -84,18 +80,18 @@ const L = N({
   defaultVariants: {
     size: "medium"
   }
-}), Q = C.forwardRef(
+}), Q = _.forwardRef(
   ({
     count: d,
     pageSize: c = 1,
     page: o,
     onPageChange: n,
     siblingCount: p = 2,
-    className: y,
-    size: h = "medium",
+    className: h,
+    size: y = "medium",
     ...f
   }, u) => {
-    const [b, P] = I(1), i = L({ size: h }), v = {
+    const [b, P] = I(1), i = L({ size: y }), v = {
       count: d,
       pageSize: c,
       siblingCount: p,
@@ -108,7 +104,7 @@ const L = N({
       j,
       {
         ref: u,
-        className: z(i.root, y),
+        className: z(i.root, h),
         ...v,
         ...f,
         children: /* @__PURE__ */ e(R, { children: (t) => {
@@ -119,6 +115,7 @@ const L = N({
               {
                 className: i.prevTrigger,
                 disabled: r,
+                asChild: !0,
                 children: /* @__PURE__ */ e(
                   m,
                   {
@@ -139,6 +136,7 @@ const L = N({
                 {
                   ...s,
                   className: i.item,
+                  asChild: !0,
                   children: /* @__PURE__ */ e(
                     m,
                     {
@@ -167,10 +165,11 @@ const L = N({
               {
                 className: i.nextTrigger,
                 disabled: a,
+                asChild: !0,
                 children: /* @__PURE__ */ e(
                   m,
                   {
-                    icon: /* @__PURE__ */ e(_, {}),
+                    icon: /* @__PURE__ */ e(C, {}),
                     shape: "rectangle",
                     styleType: "ghost",
                     size: "small",

package/dist/components/ProgressIndicator/AnimatedArc.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export declare const AnimatedArc: React.FC<{
+    className?: string;
+    radius: number;
+    width: number;
+}>;

package/dist/components/ProgressIndicator/AnimatedArc.js

@@ -0,0 +1,46 @@
+import { jsx as A } from "react/jsx-runtime";
+import n from "react";
+import { describeArc as R } from "./util.js";
+const h = 2.5, S = ({ className: f, radius: o, width: c }) => {
+  const [t, i] = n.useState(0), s = n.useRef(null), a = n.useRef(null);
+  n.useEffect(() => {
+    const e = (r) => {
+      s.current == null && (s.current = r);
+      const u = (r - s.current) / 1e3;
+      s.current = r;
+      const m = u / h;
+      i((p) => (p + m) % 1), a.current = requestAnimationFrame(e);
+    };
+    return a.current = requestAnimationFrame(e), () => {
+      a.current != null && cancelAnimationFrame(a.current);
+    };
+  }, []);
+  const { d: l, rotationDeg: d } = n.useMemo(() => {
+    const e = t * Math.PI * 2, r = 180 + 40 * Math.sin(-e) + 40, u = 90 * Math.sin(e) + 90;
+    return { d: R(
+      o + c,
+      // cx
+      o + c,
+      // cy
+      o,
+      // r
+      t * 360 + u,
+      t * 360 + r
+    ), rotationDeg: t * 360 };
+  }, [t, o, c]);
+  return /* @__PURE__ */ A(
+    "path",
+    {
+      d: l,
+      transform: `rotate(${d})`,
+      strokeLinecap: "butt",
+      stroke: "currentColor",
+      strokeWidth: c,
+      fill: "none",
+      className: f
+    }
+  );
+};
+export {
+  S as AnimatedArc
+};

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -1,29 +1,11 @@
-import { ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const ProgressIndicatorStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
-    size: {
-        small: {
-            width: "16px";
-            height: "16px";
-        };
-        medium: {
-            width: "24px";
-            height: "24px";
-        };
-        large: {
-            width: "96px";
-            height: "96px";
-        };
-    };
-    color: {
-        gray: {
-            stroke: "sd.reference.color.scale.gray.400";
-        };
-        white: {
-            stroke: "sd.reference.color.scale.white.1000";
-        };
-    };
-}>;
-type ProgressIndicatorProps = ComponentProps<"svg"> & RecipeVariantProps<typeof ProgressIndicatorStyle>;
-export declare const ProgressIndicator: ({ className, ...props }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { default as React } from 'react';
+export interface ProgressIndicatorProps extends React.ComponentProps<"div"> {
+    type?: "linear" | "circular";
+    size?: "small" | "medium" | "large";
+    value?: number;
+    max?: number;
+}
+export declare const ProgressIndicator: {
+    ({ value, max, type, size, className, style, ...props }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};