@serendie/ui 1.0.1 → 2.0.0-dev.202507180004

package/dist/components/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { AccordionItemProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/types';
-declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "title" | "itemIndicator" | "icon" | "description", {
+declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "item" | "icon" | "itemIndicator", {
     isLeftIcon: {
         true: {
             item: {

package/dist/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "icon" | "description", {
+declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "description" | "icon", {
     type: {
         information: {
             container: {

package/dist/components/BottomNavigation/BottomNavigationItem.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "label" | "root" | "iconGroup" | "badge", {
+export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "icon" | "iconGroup" | "badge", {
     isActive: {
         true: {
             label: {

package/dist/components/Button/Button.d.ts

@@ -117,14 +117,14 @@ type ButtonLoadingProps = {
 };
 export declare const Button: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: "medium" | "small" | undefined;
 } & {
     leftIcon?: React.ReactElement;
 } & {
     rightIcon?: never;
 } & ButtonLoadingProps, "ref"> | Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: "medium" | "small" | undefined;
 } & {
     leftIcon?: never;
 } & {

package/dist/components/Chart/SerendieChartProps.d.ts

@@ -0,0 +1,40 @@
+import { BarSvgProps, BarDatum } from '@nivo/bar';
+import { LineSeries, LineSvgProps } from '@nivo/line';
+import { PieSvgProps } from '@nivo/pie';
+export type ChartColorCategory = "primary" | "positive" | "negative" | "notice" | "multi";
+export declare const getChartColors: (category: ChartColorCategory, count?: number) => string[];
+export declare const getChartColor: (category: ChartColorCategory, index?: number) => string;
+export declare const defaultChartMargin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const compactChartMargin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const legendChartMargin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const spaciousChartMargin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type ChartPropsResult = {
+    bar: Partial<BarSvgProps<BarDatum>>;
+    line: Partial<LineSvgProps<LineSeries>>;
+    pie: Partial<PieSvgProps<Record<string, unknown>>>;
+};
+export declare const useChartProps: <T extends keyof ChartPropsResult>(chartType: T, colorCategory?: ChartColorCategory) => ChartPropsResult[T];
+export declare const useBarChartProps: (c?: ChartColorCategory) => Partial<BarSvgProps<BarDatum>>;
+export declare const useLineChartProps: (c?: ChartColorCategory) => Partial<LineSvgProps<LineSeries>>;
+export declare const usePieChartProps: (c?: ChartColorCategory) => Partial<PieSvgProps<Record<string, unknown>>>;
+export {};

package/dist/components/Chart/SerendieChartProps.js

@@ -0,0 +1,127 @@
+import { token as r } from "../../styled-system/tokens/index.js";
+import n from "../../node_modules/@serendie/design-token/dist/tokens.js";
+import { SerendieChartTheme as p } from "./SerendieChartTheme.js";
+import { getContrastTextColor as i } from "../../utils/colors.js";
+const c = (s, t) => {
+  const a = {
+    primary: [
+      r("colors.sd.system.color.chart.mark.primary.01"),
+      r("colors.sd.system.color.chart.mark.primary.02"),
+      r("colors.sd.system.color.chart.mark.primary.03"),
+      r("colors.sd.system.color.chart.mark.primary.04"),
+      r("colors.sd.system.color.chart.mark.primary.05"),
+      r("colors.sd.system.color.chart.mark.primary.06")
+    ],
+    positive: [
+      r("colors.sd.system.color.chart.mark.positive.01"),
+      r("colors.sd.system.color.chart.mark.positive.02"),
+      r("colors.sd.system.color.chart.mark.positive.03"),
+      r("colors.sd.system.color.chart.mark.positive.04"),
+      r("colors.sd.system.color.chart.mark.positive.05"),
+      r("colors.sd.system.color.chart.mark.positive.06")
+    ],
+    negative: [
+      r("colors.sd.system.color.chart.mark.negative.01"),
+      r("colors.sd.system.color.chart.mark.negative.02"),
+      r("colors.sd.system.color.chart.mark.negative.03"),
+      r("colors.sd.system.color.chart.mark.negative.04"),
+      r("colors.sd.system.color.chart.mark.negative.05"),
+      r("colors.sd.system.color.chart.mark.negative.06")
+    ],
+    notice: [
+      r("colors.sd.system.color.chart.mark.notice.01"),
+      r("colors.sd.system.color.chart.mark.notice.02"),
+      r("colors.sd.system.color.chart.mark.notice.03"),
+      r("colors.sd.system.color.chart.mark.notice.04"),
+      r("colors.sd.system.color.chart.mark.notice.05"),
+      r("colors.sd.system.color.chart.mark.notice.06")
+    ],
+    multi: [
+      r("colors.sd.system.color.chart.mark.multi.01"),
+      r("colors.sd.system.color.chart.mark.multi.02"),
+      r("colors.sd.system.color.chart.mark.multi.03"),
+      r("colors.sd.system.color.chart.mark.multi.04"),
+      r("colors.sd.system.color.chart.mark.multi.05"),
+      r("colors.sd.system.color.chart.mark.multi.06"),
+      r("colors.sd.system.color.chart.mark.multi.07"),
+      r("colors.sd.system.color.chart.mark.multi.08"),
+      r("colors.sd.system.color.chart.mark.multi.09"),
+      r("colors.sd.system.color.chart.mark.multi.10")
+    ]
+  }[s];
+  return t ? a.slice(0, t) : a;
+}, C = (s, t = 0) => c(s)[t] || c(s)[0], o = n.sd.system.dimension.spacing, h = {
+  top: parseInt(o.large, 10),
+  right: parseInt(o.large, 10),
+  bottom: parseInt(o.fourExtraLarge, 10),
+  left: parseInt(o.fiveExtraLarge, 10)
+}, L = {
+  top: parseInt(o.small, 10),
+  right: parseInt(o.small, 10),
+  bottom: parseInt(o.twoExtraLarge, 10),
+  left: parseInt(o.threeExtraLarge, 10)
+}, b = {
+  top: parseInt(o.large, 10),
+  right: parseInt(o.sixExtraLarge, 10),
+  bottom: parseInt(o.fourExtraLarge, 10),
+  left: parseInt(o.fiveExtraLarge, 10)
+}, f = {
+  top: parseInt(o.extraLarge, 10),
+  right: parseInt(o.extraLarge, 10),
+  bottom: parseInt(o.fiveExtraLarge, 10),
+  left: parseInt(o.sixExtraLarge, 10)
+}, l = (s, t = "primary") => {
+  const m = c(t), a = {
+    theme: p,
+    colors: m,
+    margin: h
+  };
+  return {
+    bar: {
+      ...a,
+      padding: 0.3,
+      innerPadding: 1,
+      borderRadius: 0,
+      enableLabel: !0,
+      labelTextColor: (e) => i(e.color)
+    },
+    line: {
+      ...a,
+      enablePoints: !0,
+      pointSize: 6,
+      pointBorderWidth: 2,
+      pointBorderColor: { from: "serieColor" },
+      enableGridX: !0,
+      enableGridY: !0
+    },
+    pie: {
+      ...a,
+      innerRadius: 0.5,
+      padAngle: 0.7,
+      cornerRadius: 0,
+      activeOuterRadiusOffset: 8,
+      enableArcLabels: !0,
+      enableArcLinkLabels: !0,
+      arcLabelsTextColor: (e) => i(e.color),
+      arcLinkLabelsColor: r(
+        "colors.sd.system.color.chart.component.onChartSurface"
+      ),
+      arcLinkLabelsThickness: 2,
+      arcLinkLabelsTextColor: r(
+        "colors.sd.system.color.chart.component.onChartSurface"
+      )
+    }
+  }[s];
+}, v = (s = "primary") => l("bar", s), x = (s = "primary") => l("line", s), I = (s = "primary") => l("pie", s);
+export {
+  L as compactChartMargin,
+  h as defaultChartMargin,
+  C as getChartColor,
+  c as getChartColors,
+  b as legendChartMargin,
+  f as spaciousChartMargin,
+  v as useBarChartProps,
+  l as useChartProps,
+  x as useLineChartProps,
+  I as usePieChartProps
+};

package/dist/components/Chart/SerendieChartTheme.d.ts

@@ -0,0 +1,2 @@
+import { PartialTheme } from '@nivo/theming';
+export declare const SerendieChartTheme: PartialTheme;

package/dist/components/Chart/SerendieChartTheme.js

@@ -0,0 +1,150 @@
+import { token as t } from "../../styled-system/tokens/index.js";
+import r from "../../node_modules/@serendie/design-token/dist/tokens.js";
+const o = r.sd.reference.typography, e = r.sd.system.dimension.spacing, n = {
+  background: t("colors.sd.system.color.chart.component.chartSurface"),
+  // 軸関連のスタイル
+  axis: {
+    domain: {
+      line: {
+        stroke: t("colors.sd.system.color.chart.component.scalemark"),
+        strokeWidth: 1
+      }
+    },
+    ticks: {
+      line: {
+        stroke: "transparent",
+        // 目盛り線を非表示
+        strokeWidth: 0
+      },
+      text: {
+        fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+        fontSize: parseInt(o.scale.expanded.extraSmall, 10),
+        // 13px
+        fontFamily: o.fontFamily.primary
+      }
+    },
+    legend: {
+      text: {
+        fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+        fontSize: parseInt(o.scale.expanded.small, 10),
+        // 14px
+        fontWeight: o.fontWeight.regular,
+        // 400
+        fontFamily: o.fontFamily.primary
+      }
+    }
+  },
+  // グリッド線のスタイル
+  grid: {
+    line: {
+      stroke: t("colors.sd.system.color.chart.component.scalemark"),
+      strokeWidth: 1
+    }
+  },
+  // 凡例のスタイル
+  legends: {
+    text: {
+      fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+      fontSize: parseInt(o.scale.expanded.extraSmall, 10),
+      // 13px
+      fontFamily: o.fontFamily.primary
+    },
+    ticks: {
+      line: {
+        strokeWidth: 1
+      }
+    },
+    title: {
+      text: {
+        fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+        fontSize: parseInt(o.scale.expanded.small, 10),
+        // 14px
+        fontWeight: o.fontWeight.regular,
+        // 500
+        fontFamily: o.fontFamily.primary
+      }
+    }
+  },
+  // ラベルのスタイル（バー内のテキスト）
+  labels: {
+    text: {
+      fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+      fontSize: parseInt(o.scale.expanded.extraSmall, 10),
+      // 13px
+      fontWeight: o.fontWeight.regular,
+      // 500
+      fontFamily: o.fontFamily.primary
+    }
+  },
+  // ツールチップのスタイル
+  tooltip: {
+    container: {
+      background: t("colors.sd.system.color.chart.component.chartSurface"),
+      color: t("colors.sd.system.color.chart.component.onChartSurface"),
+      fontSize: parseInt(o.scale.expanded.extraSmall, 10),
+      // 13px
+      fontFamily: o.fontFamily.primary,
+      borderRadius: 6,
+      boxShadow: "0 3px 14px rgba(0, 0, 0, 0.2)",
+      border: `1px solid ${t("colors.sd.system.color.chart.component.scalemark")}`,
+      padding: `${parseInt(e.small, 10)}px ${parseInt(e.medium, 10)}px`
+    }
+  },
+  // 注釈のスタイル
+  annotations: {
+    text: {
+      fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+      fontSize: parseInt(o.scale.expanded.extraSmall, 10),
+      // 13px
+      fontFamily: o.fontFamily.primary
+    },
+    link: {
+      stroke: t("colors.sd.system.color.chart.component.scalemark"),
+      strokeWidth: 1,
+      strokeOpacity: 0.3
+    },
+    outline: {
+      stroke: t("colors.sd.system.color.chart.component.scalemark"),
+      strokeWidth: 2,
+      strokeOpacity: 0.3,
+      fill: "transparent"
+    }
+  },
+  // ドットのスタイル（折れ線グラフなど）
+  dots: {
+    text: {
+      fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+      fontSize: parseInt(o.scale.expanded.extraSmall, 10),
+      // 13px
+      fontFamily: o.fontFamily.primary
+    }
+  },
+  // マーカーのスタイル（しきい値線など）
+  markers: {
+    lineColor: t("colors.sd.system.color.chart.component.threshold"),
+    lineStrokeWidth: 1,
+    text: {
+      fontFamily: o.fontFamily.primary,
+      fontSize: parseInt(o.scale.expanded.extraSmall, 10),
+      // 13px
+      fill: t("colors.sd.system.color.chart.component.onChartSurface"),
+      outlineWidth: 2,
+      outlineColor: t(
+        "colors.sd.system.color.chart.component.chartSurface"
+      ),
+      outlineOpacity: 1
+    }
+  },
+  // クロスヘアのスタイル
+  crosshair: {
+    line: {
+      stroke: t("colors.sd.system.color.chart.component.scalemark"),
+      strokeWidth: 1,
+      strokeOpacity: 0.5,
+      strokeDasharray: "3 3"
+    }
+  }
+};
+export {
+  n as SerendieChartTheme
+};

package/dist/components/Chart/chartData.d.ts

@@ -0,0 +1,29 @@
+export declare const barData: {
+    month: string;
+    value: number;
+}[];
+export declare const multiSeriesData: {
+    month: string;
+    sales: number;
+    profit: number;
+    cost: number;
+}[];
+export declare const lineData: {
+    id: string;
+    data: {
+        x: string;
+        y: number;
+    }[];
+}[];
+export declare const pieData: {
+    id: string;
+    value: number;
+}[];
+export declare const stackedData: {
+    category: string;
+    segment1: number;
+    segment2: number;
+    segment3: number;
+    segment4: number;
+    segment5: number;
+}[];

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

@@ -0,0 +1,3 @@
+export { SerendieChartTheme } from './SerendieChartTheme';
+export type { ChartColorCategory } from './SerendieChartProps';
+export { useChartProps, useBarChartProps, useLineChartProps, usePieChartProps, getChartColors, getChartColor, defaultChartMargin, compactChartMargin, legendChartMargin, spaciousChartMargin, } from './SerendieChartProps';

package/dist/components/Chart/index.js

@@ -0,0 +1,15 @@
+import { SerendieChartTheme as e } from "./SerendieChartTheme.js";
+import { compactChartMargin as o, defaultChartMargin as C, getChartColor as h, getChartColors as s, legendChartMargin as i, spaciousChartMargin as p, useBarChartProps as g, useChartProps as n, useLineChartProps as u, usePieChartProps as P } from "./SerendieChartProps.js";
+export {
+  e as SerendieChartTheme,
+  o as compactChartMargin,
+  C as defaultChartMargin,
+  h as getChartColor,
+  s as getChartColors,
+  i as legendChartMargin,
+  p as spaciousChartMargin,
+  g as useBarChartProps,
+  n as useChartProps,
+  u as useLineChartProps,
+  P as usePieChartProps
+};

package/dist/components/CheckBox/CheckBox.js

@@ -1,16 +1,17 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { css as x } from "../../styled-system/css/css.js";
-import { cx as t } from "../../styled-system/css/cx.js";
+import { cx as c } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
 import { sva as u } from "../../styled-system/css/sva.js";
 import k from "../../assets/checkboxChecked.svg.js";
 import b from "../../assets/checkboxUnchecked.svg.js";
-import { CheckboxRoot as g } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
-import { CheckboxContext as f } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
-import { CheckboxControl as C } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
-import { CheckboxLabel as c } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
-import { CheckboxHiddenInput as S } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
-const I = {
+import g from "../../assets/checkboxIndeterminate.svg.js";
+import { CheckboxRoot as f } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as C } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as S } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxLabel as i } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
+import { CheckboxHiddenInput as I } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const _ = {
   flexShrink: 0,
   cursor: "pointer",
   ".group:has(:focus-visible) &": {
@@ -30,21 +31,21 @@ const I = {
       }
     }
   }
-}, _ = {
+}, v = {
   width: 24,
   height: 24,
   color: "sd.system.color.impression.primary",
   "& .checkmark": {
     color: "sd.system.color.impression.onPrimaryContainer"
   }
-}, v = {
+}, N = {
   width: 24,
   height: 24,
   color: "sd.system.color.component.outline",
   _disabled: {
     color: "color-mix(in srgb, {colors.sd.system.color.component.outline}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, i = u({
+}, n = u({
   slots: [
     "root",
     "itemControl",
@@ -63,9 +64,9 @@ const I = {
       paddingX: "sd.system.dimension.spacing.medium",
       cursor: "pointer"
     },
-    itemControl: I,
-    checkedIcon: _,
-    uncheckedIcon: v,
+    itemControl: _,
+    checkedIcon: v,
+    uncheckedIcon: N,
     itemTextGroup: {
       display: "flex",
       flexFlow: "column"
@@ -92,38 +93,38 @@ const I = {
       }
     }
   }
-}), F = ({
-  value: n,
-  label: m,
+}), L = ({
+  value: m,
+  label: l,
   helperText: s,
-  className: l,
-  ...d
+  className: d,
+  ...a
 }) => {
-  const [a, p] = i.splitVariantProps(d), o = i(a), y = t(
+  const [p, y] = n.splitVariantProps(a), o = n(p), h = c(
     o.root,
     s && x({ alignItems: "flex-start" })
   );
-  return /* @__PURE__ */ r(
-    g,
+  return /* @__PURE__ */ t(
+    f,
     {
-      value: n,
-      className: t("group", y, l),
-      ...p,
+      value: m,
+      className: c("group", h, d),
+      ...y,
       children: [
-        /* @__PURE__ */ e(f, { children: (h) => /* @__PURE__ */ e(C, { className: o.itemControl, children: h.checked ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : /* @__PURE__ */ e(b, { className: o.uncheckedIcon }) }) }),
-        /* @__PURE__ */ r("div", { className: o.itemTextGroup, children: [
-          /* @__PURE__ */ e(c, { className: o.itemText, children: m }),
-          s && /* @__PURE__ */ e(c, { className: o.helperText, children: s })
+        /* @__PURE__ */ e(C, { children: (r) => /* @__PURE__ */ e(S, { className: o.itemControl, children: r.checked === !0 ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : r.indeterminate === !0 ? /* @__PURE__ */ e(g, { className: o.checkedIcon }) : /* @__PURE__ */ e(b, { className: o.uncheckedIcon }) }) }),
+        /* @__PURE__ */ t("div", { className: o.itemTextGroup, children: [
+          /* @__PURE__ */ e(i, { className: o.itemText, children: l }),
+          s && /* @__PURE__ */ e(i, { className: o.helperText, children: s })
         ] }),
-        /* @__PURE__ */ e(S, {})
+        /* @__PURE__ */ e(I, {})
       ]
     }
   );
 };
 export {
-  F as CheckBox,
-  i as CheckBoxStyle,
-  _ as checkboxCheckedIconCss,
-  I as checkboxIconCss,
-  v as checkboxUncheckedIconCss
+  L as CheckBox,
+  n as CheckBoxStyle,
+  v as checkboxCheckedIconCss,
+  _ as checkboxIconCss,
+  N as checkboxUncheckedIconCss
 };

package/dist/components/ChoiceBox/ChoiceBox.d.ts

@@ -3,8 +3,6 @@ export declare const ChoiceBoxStyle: import('../../../styled-system/types').Slot
 type ChoiceBoxBaseProps = {
     type: "radio" | "checkbox";
 };
-export type ChoiceBoxProps = ChoiceBoxBaseProps & RadioGroupItemProps & CheckboxRootProps & {
-    indeterminate?: boolean;
-};
+export type ChoiceBoxProps = ChoiceBoxBaseProps & RadioGroupItemProps & CheckboxRootProps;
 export declare const ChoiceBox: React.FC<ChoiceBoxProps>;
 export {};