@serendie/ui 2.1.3 → 2.2.0

package/dist/components/ProgressIndicator/ProgressIndicatorIndeterminate.js

@@ -0,0 +1,215 @@
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import { AnimatedArc as h } from "./AnimatedArc.js";
+import { cx as c } from "../../styled-system/css/cx.js";
+import { cva as o } from "../../styled-system/css/cva.js";
+const m = o({
+  base: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "100%",
+        borderRadius: "sd.system.dimension.radius.full"
+      },
+      circular: {}
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    },
+    color: {
+      primary: {},
+      subtle: {}
+    }
+  },
+  compoundVariants: [
+    {
+      type: "linear",
+      size: "small",
+      css: {
+        height: "2px"
+      }
+    },
+    {
+      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",
+    color: "primary"
+  }
+}), g = o({
+  base: {
+    position: "absolute",
+    backgroundColor: "sd.reference.color.scale.gray.100"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "calc(100% - 4px)",
+        height: "100%",
+        borderRadius: "sd.system.dimension.radius.full"
+      },
+      circular: {
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        fill: "none"
+      }
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: []
+}), u = o({
+  base: {
+    position: "absolute"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "50%",
+        height: "100%",
+        animation: "progressIndicatorSlide 1.7s cubic-bezier(0.65, 0.05, 0.36, 1) infinite"
+      },
+      circular: {
+        fill: "none",
+        strokeLinecap: "butt",
+        transformOrigin: "center"
+      }
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    },
+    color: {
+      primary: {
+        backgroundColor: "sd.system.color.impression.primary",
+        stroke: "sd.system.color.impression.primary"
+      },
+      subtle: {
+        backgroundColor: "sd.reference.color.scale.gray.300",
+        stroke: "sd.reference.color.scale.gray.300"
+      }
+    }
+  },
+  compoundVariants: []
+}), y = (e) => ({
+  small: {
+    radius: 6,
+    strokeWidth: 2
+  },
+  medium: {
+    radius: 8,
+    strokeWidth: 6
+  },
+  large: {
+    radius: 20,
+    strokeWidth: 8
+  }
+})[e], f = ({
+  type: e = "linear",
+  size: r = "medium",
+  color: s = "primary",
+  className: l,
+  style: n,
+  ...d
+}) => {
+  if (e === "circular") {
+    const { radius: a, strokeWidth: t } = y(r);
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        className: c(
+          m({ type: e, size: r, color: s }),
+          l
+        ),
+        role: "progressbar",
+        "aria-valuetext": "Loading",
+        style: n,
+        ...d,
+        children: /* @__PURE__ */ i(
+          "svg",
+          {
+            viewBox: `0 0 ${a * 2 + t * 2} ${a * 2 + t * 2}`,
+            children: /* @__PURE__ */ i(
+              h,
+              {
+                className: u({ type: e, size: r, color: s }),
+                radius: a,
+                width: t
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: c(
+        m({ type: e, size: r, color: s }),
+        l
+      ),
+      role: "progressbar",
+      "aria-valuetext": "Loading",
+      style: n,
+      ...d,
+      children: [
+        /* @__PURE__ */ i("div", { className: g({ type: e, size: r }) }),
+        /* @__PURE__ */ i("div", { className: u({ type: e, size: r, color: s }) })
+      ]
+    }
+  );
+};
+f.displayName = "ProgressIndicatorIndeterminate";
+export {
+  f as ProgressIndicatorIndeterminate
+};

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

@@ -1 +1,4 @@
-export * from './ProgressIndicator.tsx';
+export { ProgressIndicator } from './ProgressIndicator';
+export type { ProgressIndicatorProps } from './ProgressIndicator';
+export { ProgressIndicatorIndeterminate } from './ProgressIndicatorIndeterminate';
+export type { ProgressIndicatorIndeterminateProps } from './ProgressIndicatorIndeterminate';

package/dist/components/ProgressIndicator/index.js

@@ -1,5 +1,6 @@
-import { ProgressIndicator as e, ProgressIndicatorStyle as s } from "./ProgressIndicator.js";
+import { ProgressIndicator as e } from "./ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as n } from "./ProgressIndicatorIndeterminate.js";
 export {
   e as ProgressIndicator,
-  s as ProgressIndicatorStyle
+  n as ProgressIndicatorIndeterminate
 };

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

@@ -0,0 +1 @@
+export declare const describeArc: (cx: number, cy: number, radius: number, startAngle: number, endAngle: number) => string;

package/dist/components/ProgressIndicator/util.js

@@ -0,0 +1,13 @@
+const A = (n, e, t, o, s) => {
+  const a = (l, p, $, g) => {
+    const M = (g - 90) * Math.PI / 180;
+    return {
+      x: l + $ * Math.cos(M),
+      y: p + $ * Math.sin(M)
+    };
+  }, c = a(n, e, t, s), r = a(n, e, t, o), h = Math.abs((s - o) % 360) <= 180 ? "0" : "1";
+  return `M ${c.x} ${c.y} A ${t} ${t} 0 ${h} 0 ${r.x} ${r.y}`;
+};
+export {
+  A as describeArc
+};

package/dist/components/Search/Search.d.ts

@@ -1,6 +1,6 @@
 import { ComboboxRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
+export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"input" | "icon" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
     size: {
         medium: {
             iconBox: {

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { SelectRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "root" | "valueText" | "iconBox" | "trigger", {
+export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "item" | "valueText" | "iconBox" | "trigger", {
     size: {
         medium: {
             root: {

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import { Switch as ArkSwitch, SwitchRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb">>;
+export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb">>;
 type SwitchItemProps = {
     label: string;
     helperText?: string;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import { Tabs as ArkTabs } from '@ark-ui/react';
-export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "root">>;
+export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "list", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "list">>;
 export declare const Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextField/TextField.js

@@ -1,189 +1,92 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolAlertCircle as P, SerendieSymbolClose as j } from "@serendie/symbols";
-import q from "../../node_modules/merge-refs/dist/esm/index.js";
-import m, { forwardRef as L } from "react";
-import { sva as M } from "../../styled-system/css/sva.js";
-import { cx as A } from "../../styled-system/css/cx.js";
-import { css as v } from "../../styled-system/css/css.js";
-const S = M({
-  slots: [
-    "root",
-    "label",
-    "required",
-    "inputWrapper",
-    "leftContent",
-    "rightContent",
-    "input",
-    "icon",
-    "messageField",
-    "description",
-    "invalidMessage"
-  ],
-  base: {
-    root: {
-      display: "inline-grid",
-      // 後から指定したCSSからwidthが上書きできないため、@layer componentsを指定
-      "@layer components": {
-        width: "min(100%, 300px)"
-      },
-      gridTemplateColumns: "auto",
-      rowGap: "sd.system.dimension.spacing.extraSmall",
-      textStyle: {
-        base: "sd.system.typography.body.medium_compact",
-        expanded: "sd.system.typography.body.medium_expanded"
-      }
-    },
-    label: {
-      textStyle: {
-        base: "sd.system.typography.label.medium_compact",
-        expanded: "sd.system.typography.label.medium_expanded"
-      }
-    },
-    inputWrapper: {
-      height: 48,
-      display: "grid",
-      gridTemplateColumns: "auto 1fr auto auto",
-      alignItems: "center",
-      outlineStyle: "solid",
-      outlineWidth: "sd.system.dimension.border.medium",
-      outlineColor: "sd.system.color.component.outline",
-      borderRadius: "sd.system.dimension.radius.medium",
-      backgroundColor: "sd.system.color.component.surface",
-      '&:has([data-focus="true"])': {
-        outlineWidth: "sd.system.dimension.border.thick",
-        outlineColor: "sd.system.color.impression.primary"
-      },
-      _focusWithin: {
-        outlineWidth: "sd.system.dimension.border.thick",
-        outlineColor: "sd.system.color.impression.primary"
-      },
-      _disabled: {
-        backgroundColor: "sd.system.color.interaction.disabled",
-        cursor: "not-allowed"
-      },
-      _invalid: {
-        outlineColor: "sd.system.color.impression.negative"
-      }
-    },
-    leftContent: {
-      paddingLeft: "sd.system.dimension.spacing.medium"
-    },
-    rightContent: {
-      paddingRight: "sd.system.dimension.spacing.medium"
-    },
-    input: {
-      outline: "none",
-      paddingTop: "sd.system.dimension.spacing.extraSmall",
-      paddingRight: "sd.system.dimension.spacing.twoExtraSmall",
-      paddingBottom: "sd.system.dimension.spacing.extraSmall",
-      paddingLeft: "sd.system.dimension.spacing.medium"
-    },
-    icon: {
-      display: "grid",
-      placeItems: "center",
-      w: "48px",
-      h: "48px",
-      expanded: {
-        w: "44px",
-        h: "44px"
-      }
-    },
-    required: {
-      pl: "sd.system.dimension.spacing.extraSmall",
-      color: "sd.system.color.impression.negative"
-    },
-    messageField: {
-      textStyle: {
-        base: "sd.system.typography.body.extraSmall_compact",
-        expanded: "sd.system.typography.body.extraSmall_expanded"
-      }
-    },
-    invalidMessage: {
-      color: "sd.system.color.impression.negative"
-    }
-  }
-}), K = L(
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as T } from "@serendie/symbols";
+import W from "../../node_modules/merge-refs/dist/esm/index.js";
+import m, { forwardRef as q } from "react";
+import { textFieldRecipe as x } from "../../styled-system/recipes/text-field-recipe.js";
+import { cx as z } from "../../styled-system/css/cx.js";
+import { css as b } from "../../styled-system/css/css.js";
+const L = q(
   ({
-    placeholder: C,
-    label: c,
-    description: a,
-    required: p,
-    invalidMessage: d,
-    invalid: o,
-    type: N = "text",
-    disabled: l,
-    onChange: u,
-    value: y,
-    className: _,
-    leftContent: g,
-    rightContent: h,
-    ...t
+    placeholder: F,
+    label: d,
+    description: i,
+    required: u,
+    invalidMessage: c,
+    invalid: a,
+    type: S = "text",
+    disabled: n,
+    onChange: h,
+    value: f,
+    className: V,
+    leftContent: N,
+    rightContent: p,
+    ...l
   }, w) => {
-    const r = m.useRef(null), R = q(r, w), [F, W] = S.splitVariantProps(t), s = S(F), k = a || o && d, [T, V] = m.useState(t.defaultValue || y), x = t.id || m.useId(), I = () => {
-      var b;
-      const i = {
+    const o = m.useRef(null), y = W(o, w), [C, P] = x.splitVariantProps(l), t = x(C), _ = i || a && c, [j, I] = m.useState(l.defaultValue || f), v = l.id || m.useId(), k = () => {
+      var R;
+      const s = {
         target: { value: "" }
       };
-      f(i), (b = t.onReset) == null || b.call(t, i), r.current && (r.current.value = "");
-    }, f = (i) => {
-      V(i.target.value), u && u(i);
+      g(s), (R = l.onReset) == null || R.call(l, s), o.current && (o.current.value = "");
+    }, g = (s) => {
+      I(s.target.value), h && h(s);
     };
-    return /* @__PURE__ */ n("div", { className: A(s.root, _), children: [
-      c ? /* @__PURE__ */ n("label", { className: s.label, htmlFor: x, children: [
-        c,
-        p && /* @__PURE__ */ e("span", { className: s.required, children: "必須" })
+    return /* @__PURE__ */ r("div", { className: z(t.root, V), children: [
+      d ? /* @__PURE__ */ r("label", { className: t.label, htmlFor: v, children: [
+        d,
+        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: "必須" })
       ] }) : null,
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ r(
         "div",
         {
-          className: s.inputWrapper,
-          "data-invalid": o ? !0 : void 0,
-          "data-disabled": l ? !0 : void 0,
+          className: t.inputWrapper,
+          "data-invalid": a ? !0 : void 0,
+          "data-disabled": n ? !0 : void 0,
           children: [
-            g ? /* @__PURE__ */ e("div", { className: s.leftContent, children: g }) : /* @__PURE__ */ e("div", {}),
+            N ? /* @__PURE__ */ e("div", { className: t.leftContent, children: N }) : /* @__PURE__ */ e("div", {}),
             /* @__PURE__ */ e(
               "input",
               {
-                ref: R,
-                id: x,
-                placeholder: C,
-                required: p,
-                disabled: l,
-                value: y,
-                type: N,
-                className: s.input,
-                onChange: f,
-                ...W
+                ref: y,
+                id: v,
+                placeholder: F,
+                required: u,
+                disabled: n,
+                value: f,
+                type: S,
+                className: t.input,
+                onChange: g,
+                ...P
               }
             ),
-            h ? /* @__PURE__ */ e("div", { className: s.rightContent, children: h }) : /* @__PURE__ */ e("div", { className: s.icon, children: !l && /* disabledの場合はアイコンを表示しない */
-            (o ? /* @__PURE__ */ e(
+            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
+            (a ? /* @__PURE__ */ e(
               "span",
               {
-                className: v({
+                className: b({
                   color: "sd.system.color.impression.negative"
                 }),
-                children: /* @__PURE__ */ e(P, { width: 20, height: 20 })
+                children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
               }
-            ) : T ? /* @__PURE__ */ e(
+            ) : j ? /* @__PURE__ */ e(
               "button",
               {
-                className: v({ cursor: "pointer" }),
-                onClick: I,
+                className: b({ cursor: "pointer" }),
+                onClick: k,
                 "aria-label": "値をクリア",
-                children: /* @__PURE__ */ e(j, { width: 20, height: 20 })
+                children: /* @__PURE__ */ e(T, { width: 20, height: 20 })
               }
             ) : null) })
           ]
         }
       ),
-      k && /* @__PURE__ */ n("div", { className: s.messageField, children: [
-        a && /* @__PURE__ */ e("p", { className: s.description, children: a }),
-        o && d && /* @__PURE__ */ e("p", { className: s.invalidMessage, children: d })
+      _ && /* @__PURE__ */ r("div", { className: t.messageField, children: [
+        i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
+        a && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
       ] })
     ] });
   }
 );
 export {
-  K as TextField
+  L as TextField
 };

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import { createToaster } from '@ark-ui/react';
-export declare const ToastStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "text" | "root" | "textGroup", {
+export declare const ToastStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "icon" | "text" | "textGroup", {
     variant: {
         default: {
             root: {

package/dist/components/TopAppBar/TopAppBar.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
 import { NotificationBadgeProps } from '../NotificationBadge';
-declare const topAppBarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "left" | "title" | "root" | "buttonContainer", {
+declare const topAppBarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "left" | "root" | "title" | "buttonContainer", {
     type: {
         navbar: {};
         titleBar: {};

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/CheckBox/index.ts';
 export * from './components/ChoiceBox/index.ts';
 export * from './components/DashboardWidget/index.ts';
 export * from './components/DataTable/index.ts';
+export * from './components/DatePicker/index.ts';
 export * from './components/Divider/index.ts';
 export * from './components/Drawer/index.ts';
 export * from './components/DropdownMenu/index.ts';