@serendie/ui 1.0.0 → 2.0.0

package/dist/assets/checkboxIndeterminate.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M3.25 6C3.25 4.48122 4.48122 3.25 6 3.25H18C19.5188 3.25 20.75 4.48122 20.75 6V18C20.75 19.5188 19.5188 20.75 18 20.75H6C4.48122 20.75 3.25 19.5188 3.25 18V6Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17 12.75H7V11.25H17V12.75Z", fill: "currentColor", className: "checkmark" }));
+export {
+  l as default
+};

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/ChoiceBox/ChoiceBox.js

@@ -1,23 +1,24 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import "../../styled-system/css/css.js";
 import { cx as n } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
-import { sva as a } from "../../styled-system/css/sva.js";
-import p from "../../assets/checkboxChecked.svg.js";
-import I from "../../assets/checkboxUnchecked.svg.js";
-import C from "../../assets/radioChecked.svg.js";
-import x from "../../assets/radioUnchecked.svg.js";
-import { checkboxUncheckedIconCss as l, checkboxCheckedIconCss as b, checkboxIconCss as f } from "../CheckBox/CheckBox.js";
-import { radioUncheckedIconCss as u, radioCheckedIconCss as U, radioIconCss as N } from "../RadioButton/RadioButton.js";
+import { sva as k } from "../../styled-system/css/sva.js";
+import I from "../../assets/checkboxChecked.svg.js";
+import p from "../../assets/checkboxUnchecked.svg.js";
+import C from "../../assets/checkboxIndeterminate.svg.js";
+import x from "../../assets/radioChecked.svg.js";
+import l from "../../assets/radioUnchecked.svg.js";
+import { checkboxUncheckedIconCss as f, checkboxCheckedIconCss as b, checkboxIconCss as u } from "../CheckBox/CheckBox.js";
+import { radioUncheckedIconCss as U, radioCheckedIconCss as N, radioIconCss as g } from "../RadioButton/RadioButton.js";
 import { RadioGroupItem as R } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
-import { RadioGroupItemContext as g } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
+import { RadioGroupItemContext as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
 import { RadioGroupItemControl as v } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
-import { RadioGroupItemHiddenInput as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
-import { CheckboxRoot as G } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
-import { CheckboxContext as P } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
-import { CheckboxControl as j } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
-import { CheckboxHiddenInput as y } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
-const h = a({
+import { RadioGroupItemHiddenInput as G } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
+import { CheckboxRoot as P } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as j } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as y } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxHiddenInput as B } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const h = k({
   slots: [
     "root",
     "radioItem",
@@ -31,53 +32,58 @@ const h = a({
     root: {
       display: "flex"
     },
-    radioItem: N,
-    radioCheckedIcon: U,
-    radioUncheckedIcon: u,
-    checkboxItem: f,
+    radioItem: g,
+    radioCheckedIcon: N,
+    radioUncheckedIcon: U,
+    checkboxItem: u,
     checkboxCheckedIcon: b,
-    checkboxUncheckedIcon: l
+    checkboxUncheckedIcon: f
   }
-}), Y = ({
+}), _ = ({
   type: r,
   value: t,
-  className: i,
-  ...s
+  className: d,
+  ...i
 }) => {
-  const [k, m] = h.splitVariantProps(s), c = h(k);
+  const [s, a] = h.splitVariantProps(i), e = h(s);
   if (r === "radio")
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ m(
       R,
       {
         value: t,
-        className: n("group", c.root, i),
-        ...m,
+        className: n("group", e.root, d),
+        ...a,
         children: [
-          /* @__PURE__ */ o(g, { children: (e) => /* @__PURE__ */ o(v, { className: c.radioItem, asChild: !0, children: e.checked ? /* @__PURE__ */ o(C, { className: c.radioCheckedIcon }) : /* @__PURE__ */ o(x, { className: c.radioUncheckedIcon }) }) }),
-          /* @__PURE__ */ o(S, {})
+          /* @__PURE__ */ o(S, { children: (c) => /* @__PURE__ */ o(v, { className: e.radioItem, asChild: !0, children: c.checked ? /* @__PURE__ */ o(x, { className: e.radioCheckedIcon }) : /* @__PURE__ */ o(l, { className: e.radioUncheckedIcon }) }) }),
+          /* @__PURE__ */ o(G, {})
         ]
       }
     );
   if (r === "checkbox")
-    return /* @__PURE__ */ d(
-      G,
+    return /* @__PURE__ */ o(
+      P,
       {
         value: t,
-        className: n("group", c.root, i),
-        ...m,
-        children: [
-          /* @__PURE__ */ o(P, { children: (e) => /* @__PURE__ */ o(j, { className: c.checkboxItem, children: e.checked ? /* @__PURE__ */ o(p, { className: c.checkboxCheckedIcon }) : /* @__PURE__ */ o(
-            I,
+        className: n("group", e.root, d),
+        ...i,
+        children: /* @__PURE__ */ o(j, { children: (c) => /* @__PURE__ */ m(y, { className: e.checkboxItem, children: [
+          c.checked === !0 ? /* @__PURE__ */ o(I, { className: e.checkboxCheckedIcon }) : c.checkedState === "indeterminate" ? /* @__PURE__ */ o(
+            C,
             {
-              className: c.checkboxUncheckedIcon
+              className: e.checkboxCheckedIcon
             }
-          ) }) }),
-          /* @__PURE__ */ o(y, {})
-        ]
+          ) : /* @__PURE__ */ o(
+            p,
+            {
+              className: e.checkboxUncheckedIcon
+            }
+          ),
+          /* @__PURE__ */ o(B, { checked: c.checked })
+        ] }) })
       }
     );
 };
 export {
-  Y as ChoiceBox,
+  _ as ChoiceBox,
   h as ChoiceBoxStyle
 };

package/dist/components/DataTable/DataTableComponent.d.ts

@@ -0,0 +1,23 @@
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+/**
+ * TanStack Tableは設計上、各カラムが異なる値の型を持つことを前提としています。
+ * createColumnHelperは各カラムに正確な型（string, number等）を付与しますが、
+ * これらを単一の配列にまとめる際、TypeScriptの型システムの制約により問題が生じます。
+ *
+ * TanStack Table自体も内部実装で`ColumnDef<TData, any>[]`を使用しており、
+ * これは意図的な設計判断です。これに従い、型エイリアスで意図を明確にします。
+ * https://github.com/TanStack/table/blob/0cc6992c7836489661a0954a2b56e620850ad4da/packages/table-core/src/types.ts#L288C1-L289C1
+ */
+type TableColumnDef<TData> = ColumnDef<TData, any>;
+export interface DataTableComponentProps<TData = Record<string, unknown>> {
+    data: TData[];
+    columns: TableColumnDef<TData>[];
+    enableRowSelection?: boolean;
+    enableSorting?: boolean;
+    initialSorting?: SortingState;
+    onRowSelectionChange?: (selection: Record<string, boolean>) => void;
+    onSortingChange?: (sorting: SortingState) => void;
+    className?: string;
+}
+export declare function DataTableComponent<TData = Record<string, unknown>>({ data, columns, enableRowSelection, enableSorting, initialSorting, onSortingChange, className, }: DataTableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default DataTableComponent;

package/dist/components/DataTable/DataTableComponent.js

@@ -0,0 +1,52 @@
+import { jsxs as M, jsx as e } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { useReactTable as T } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DataTable as t } from "./index.js";
+import { getSortedRowModel as S, getCoreRowModel as b } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+function D({
+  data: l = [],
+  columns: m = [],
+  enableRowSelection: r = !0,
+  enableSorting: c = !0,
+  initialSorting: f = [],
+  onSortingChange: s,
+  className: w
+}) {
+  const [R, p] = a({}), [i, g] = a(f), u = (o) => {
+    const n = typeof o == "function" ? o(i) : o;
+    g(n), s == null || s(n);
+  }, d = T({
+    data: l,
+    columns: m,
+    getCoreRowModel: b(),
+    getSortedRowModel: S(),
+    state: { rowSelection: R, sorting: i },
+    onRowSelectionChange: p,
+    onSortingChange: u,
+    enableRowSelection: r,
+    enableSorting: c
+  });
+  return /* @__PURE__ */ M(t.Root, { className: w, children: [
+    /* @__PURE__ */ e(t.Thead, { children: d.getHeaderGroups().map((o) => /* @__PURE__ */ e(
+      t.HeaderRow,
+      {
+        headerGroup: o,
+        enableRowSelection: r,
+        table: d
+      },
+      o.id
+    )) }),
+    /* @__PURE__ */ e(t.Tbody, { children: d.getRowModel().rows.map((o) => /* @__PURE__ */ e(
+      t.Row,
+      {
+        row: o,
+        enableRowSelection: r
+      },
+      o.id
+    )) })
+  ] });
+}
+export {
+  D as DataTableComponent,
+  D as default
+};

package/dist/components/DataTable/createColumnHelper.d.ts

@@ -0,0 +1,2 @@
+import { createColumnHelper as TanstackCreateColumnHelper } from '@tanstack/react-table';
+export declare const createColumnHelper: typeof TanstackCreateColumnHelper;

package/dist/components/DataTable/createColumnHelper.js

@@ -0,0 +1,5 @@
+import { createColumnHelper as e } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+const o = e;
+export {
+  o as createColumnHelper
+};

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

@@ -0,0 +1,19 @@
+import { createColumnHelper } from './createColumnHelper';
+import { DataTableComponent, DataTableComponentProps } from './DataTableComponent';
+import { BodyCell, Root, Row, HeaderRow, Thead, Tr, HeaderCheckbox, BodyCheckbox, Tbody, HeaderCell } from './table';
+interface DataTableCompound {
+    <TData = Record<string, unknown>>(props: DataTableComponentProps<TData>): JSX.Element;
+    BodyCell: typeof BodyCell;
+    BodyCheckbox: typeof BodyCheckbox;
+    Tbody: typeof Tbody;
+    HeaderCell: typeof HeaderCell;
+    HeaderCheckbox: typeof HeaderCheckbox;
+    HeaderRow: typeof HeaderRow;
+    Root: typeof Root;
+    Row: typeof Row;
+    Thead: typeof Thead;
+    Tr: typeof Tr;
+    createColumnHelper: typeof createColumnHelper;
+}
+declare const DataTable: DataTableCompound;
+export { DataTable, DataTableComponent };