@serendie/ui 2.1.3 → 2.2.0

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/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;
+};

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,65 +1,223 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cva as n } from "../../styled-system/css/cva.js";
-import { cx as l } from "../../styled-system/css/cx.js";
-const r = n({
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { useMemo as v } from "react";
+import { describeArc as b } from "./util.js";
+import { cx as h } from "../../styled-system/css/cx.js";
+import { cva as c } from "../../styled-system/css/cva.js";
+const u = c({
   base: {
-    animation: "1s linear infinite spin",
-    stroke: "sd.reference.color.scale.gray.400"
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   variants: {
+    type: {
+      linear: {
+        width: "100%"
+      },
+      circular: {}
+    },
     size: {
-      small: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: [
+    {
+      type: "linear",
+      size: "small",
+      css: {
+        height: "4px"
+      }
+    },
+    {
+      type: "linear",
+      size: "medium",
+      css: {
+        height: "4px"
+      }
+    },
+    {
+      type: "linear",
+      size: "large",
+      css: {
+        height: "8px"
+      }
+    },
+    {
+      type: "circular",
+      size: "small",
+      css: {
+        width: "12px",
+        height: "12px"
+      }
+    },
+    {
+      type: "circular",
+      size: "medium",
+      css: {
         width: "16px",
         height: "16px"
+      }
+    },
+    {
+      type: "circular",
+      size: "large",
+      css: {
+        width: "40px",
+        height: "40px"
+      }
+    }
+  ],
+  defaultVariants: {
+    type: "linear",
+    size: "medium"
+  }
+}), p = c({
+  base: {
+    position: "absolute",
+    backgroundColor: "sd.reference.color.scale.gray.100",
+    overflow: "hidden"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "calc(100% - 4px)",
+        height: "100%",
+        borderRadius: "sd.system.dimension.radius.full"
       },
-      medium: {
-        width: "24px",
-        height: "24px"
-      },
-      large: {
-        width: "96px",
-        height: "96px"
+      circular: {
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        fill: "none"
       }
     },
-    color: {
-      gray: {
-        stroke: "sd.reference.color.scale.gray.400"
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: []
+}), g = c({
+  base: {
+    position: "absolute",
+    backgroundColor: "sd.system.color.impression.primary"
+  },
+  variants: {
+    type: {
+      linear: {
+        left: "0px",
+        height: "100%",
+        borderRadius: "0"
       },
-      white: {
-        stroke: "sd.reference.color.scale.white.1000"
+      circular: {
+        width: "100%",
+        height: "100%",
+        fill: "none",
+        stroke: "sd.system.color.impression.primary",
+        strokeLinecap: "butt",
+        transformOrigin: "center"
       }
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
     }
   },
-  defaultVariants: {
-    size: "medium",
-    color: "gray"
-  }
-}), d = ({
-  className: t,
-  ...s
+  compoundVariants: []
+}), w = (t) => ({
+  small: { radius: 8, strokeWidth: 2 },
+  medium: { radius: 12, strokeWidth: 4 },
+  large: { radius: 24, strokeWidth: 4 }
+})[t], k = ({
+  value: t = 0,
+  max: o = 1,
+  type: i = "linear",
+  size: s = "medium",
+  className: n,
+  style: d,
+  ...m
 }) => {
-  const [o, i] = r.splitVariantProps(s), a = r(o);
-  return /* @__PURE__ */ e(
-    "svg",
+  const l = Math.min(Math.max(t / o * 100, 0), 100);
+  if (i === "circular") {
+    const { radius: r, strokeWidth: e } = w(s), x = v(() => {
+      const y = l / 100 * 360 - 1e-5;
+      return b(
+        r + e,
+        r + e,
+        r,
+        0,
+        y
+      );
+    }, [l, r, e]);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: h(u({ type: i, size: s }), n),
+        role: "progressbar",
+        "aria-valuenow": t,
+        "aria-valuemin": 0,
+        "aria-valuemax": o,
+        style: d,
+        ...m,
+        children: /* @__PURE__ */ f(
+          "svg",
+          {
+            viewBox: `0 0 ${r * 2 + e * 2} ${r * 2 + e * 2}`,
+            style: { width: "100%", height: "100%" },
+            children: [
+              /* @__PURE__ */ a(
+                "circle",
+                {
+                  cx: r + e,
+                  cy: r + e,
+                  r,
+                  className: p({ type: i, size: s }),
+                  stroke: "var(--colors-sd-reference-color-scale-gray-100)",
+                  strokeWidth: e
+                }
+              ),
+              l > 0 && /* @__PURE__ */ a(
+                "path",
+                {
+                  d: x,
+                  className: g({ type: i, size: s }),
+                  strokeWidth: e * 2
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ a(
+    "div",
     {
-      width: "48",
-      height: "48",
-      viewBox: "0 0 48 48",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: l(a, t),
-      ...i,
-      children: /* @__PURE__ */ e(
-        "path",
+      className: h(u({ type: i, size: s }), n),
+      role: "progressbar",
+      "aria-valuenow": t,
+      "aria-valuemin": 0,
+      "aria-valuemax": o,
+      style: d,
+      ...m,
+      children: /* @__PURE__ */ a("div", { className: p({ type: i, size: s }), children: /* @__PURE__ */ a(
+        "div",
         {
-          d: "M24 44C27.9556 44 31.8224 42.827 35.1114 40.6294C38.4004 38.4318 40.9638 35.3082 42.4776 31.6537C43.9913 27.9992 44.3874 23.9778 43.6157 20.0982C42.844 16.2186 40.9392 12.6549 38.1421 9.85786C35.3451 7.06082 31.7814 5.156 27.9018 4.38429C24.0222 3.61259 20.0008 4.00866 16.3463 5.52241C12.6918 7.03616 9.56821 9.59962 7.37059 12.8886C5.17297 16.1776 3.99998 20.0444 3.99998 24",
-          strokeWidth: "4"
+          className: g({ type: i, size: s }),
+          style: {
+            width: `${l}%`
+          }
         }
-      )
+      ) })
     }
   );
 };
+k.displayName = "ProgressIndicator";
 export {
-  d as ProgressIndicator,
-  r as ProgressIndicatorStyle
+  k as ProgressIndicator
 };

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ProgressIndicatorIndeterminateProps extends React.ComponentProps<"div"> {
+    type?: "linear" | "circular";
+    size?: "small" | "medium" | "large";
+    color?: "primary" | "subtle";
+}
+export declare const ProgressIndicatorIndeterminate: {
+    ({ type, size, color, className, style, ...props }: ProgressIndicatorIndeterminateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};