@serendie/ui 1.0.0 → 2.0.0

package/dist/components/DataTable/index.js

@@ -0,0 +1,28 @@
+import { createColumnHelper as r } from "./createColumnHelper.js";
+import { DataTableComponent as e } from "./DataTableComponent.js";
+import { Root as m } from "./table/Root.js";
+import { Thead as t } from "./table/Thead.js";
+import { Tr as a } from "./table/Tr.js";
+import { Row as p } from "./table/Row.js";
+import { HeaderRow as d } from "./table/HeaderRow.js";
+import { BodyCell as l } from "./table/BodyCell.js";
+import { HeaderCheckbox as f } from "./table/HeaderCheckbox.js";
+import { BodyCheckbox as i } from "./table/BodyCheckbox.js";
+import { Tbody as C } from "./table/Tbody.js";
+import { HeaderCell as b } from "./table/HeaderCell.js";
+const o = e;
+o.BodyCell = l;
+o.BodyCheckbox = i;
+o.Tbody = C;
+o.HeaderCell = b;
+o.HeaderCheckbox = f;
+o.HeaderRow = d;
+o.Root = m;
+o.Row = p;
+o.Thead = t;
+o.Tr = a;
+o.createColumnHelper = r;
+export {
+  o as DataTable,
+  e as DataTableComponent
+};

package/dist/components/DataTable/table/BodyCell.d.ts

@@ -0,0 +1,55 @@
+import { RecipeVariantProps } from '../../../../styled-system/css';
+declare const cellStyle: import('../../../../styled-system/types').RecipeRuntimeFn<{
+    type: {
+        default: {
+            background: "sd.system.color.component.surface";
+        };
+        success: {
+            background: "sd.system.color.impression.positiveContainerVariant";
+        };
+        notice: {
+            background: "sd.system.color.impression.noticeContainerVariant";
+        };
+        error: {
+            background: "sd.system.color.impression.negativeContainerVariant";
+            color: "sd.system.color.impression.onNegativeContainerVariant";
+        };
+    };
+    state: {
+        enabled: {};
+        hovered: {
+            background: "color-mix(in srgb, token(colors.sd.system.color.component.surface) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)";
+        };
+        selected: {
+            background: "sd.system.color.component.inversePrimary";
+        };
+    };
+    size: {
+        small: {
+            fontSize: "11px";
+            height: "24px";
+        };
+        medium: {
+            fontSize: "13px";
+            height: "32px";
+        };
+        large: {
+            fontSize: "15px";
+            height: "40px";
+        };
+    };
+}>;
+type CellStyleVariants = RecipeVariantProps<typeof cellStyle>;
+type ExtractVariantProperty<T, K extends string> = NonNullable<T> extends infer V ? V extends {
+    [P in K]?: infer U;
+} ? U : never : never;
+export type CellType = ExtractVariantProperty<CellStyleVariants, "type">;
+type CellState = ExtractVariantProperty<CellStyleVariants, "state">;
+type CellSize = ExtractVariantProperty<CellStyleVariants, "size">;
+export declare const BodyCell: React.FC<{
+    children: React.ReactNode;
+    size?: CellSize;
+    type?: CellType | string;
+    state?: CellState;
+}>;
+export {};

package/dist/components/DataTable/table/BodyCell.js

@@ -0,0 +1,127 @@
+import { jsx as c } from "react/jsx-runtime";
+import "../../../styled-system/css/css.js";
+import { cva as i } from "../../../styled-system/css/cva.js";
+import "../../../styled-system/helpers.js";
+const a = i({
+  base: {
+    borderBottom: "1px solid",
+    borderColor: "sd.system.color.component.outline",
+    fontFamily: "Roboto, sans-serif",
+    color: "sd.system.color.component.onSurface",
+    textAlign: "left",
+    verticalAlign: "middle",
+    fontWeight: 400,
+    fontSize: "13px",
+    px: "sd.system.dimension.spacing.extraSmall",
+    py: "sd.system.dimension.spacing.twoExtraSmall",
+    height: "32px",
+    whiteSpace: "nowrap"
+  },
+  variants: {
+    type: {
+      default: {
+        background: "sd.system.color.component.surface"
+      },
+      success: {
+        background: "sd.system.color.impression.positiveContainerVariant"
+      },
+      notice: {
+        background: "sd.system.color.impression.noticeContainerVariant"
+      },
+      error: {
+        background: "sd.system.color.impression.negativeContainerVariant",
+        color: "sd.system.color.impression.onNegativeContainerVariant"
+      }
+    },
+    state: {
+      enabled: {},
+      hovered: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.component.surface) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)"
+      },
+      selected: {
+        background: "sd.system.color.component.inversePrimary"
+      }
+    },
+    size: {
+      small: { fontSize: "11px", height: "24px" },
+      medium: { fontSize: "13px", height: "32px" },
+      large: { fontSize: "15px", height: "40px" }
+    }
+  },
+  compoundVariants: [
+    {
+      type: "success",
+      state: "hovered",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.positiveContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.95
+      }
+    },
+    {
+      type: "notice",
+      state: "hovered",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.noticeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.95
+      }
+    },
+    {
+      type: "error",
+      state: "hovered",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.negativeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.95
+      }
+    },
+    {
+      type: "success",
+      state: "selected",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.positiveContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.98
+      }
+    },
+    {
+      type: "notice",
+      state: "selected",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.noticeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.98
+      }
+    },
+    {
+      type: "error",
+      state: "selected",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.negativeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.98
+      }
+    }
+  ],
+  defaultVariants: {
+    type: "default",
+    state: "enabled"
+  }
+}), l = ["default", "success", "notice", "error"], m = (o) => l.includes(o) ? o : "default", g = ({
+  children: o,
+  size: t = "medium",
+  type: r = "default",
+  state: e = "enabled",
+  ...n
+}) => {
+  const s = m(r);
+  return /* @__PURE__ */ c(
+    "td",
+    {
+      role: "cell",
+      "data-type": s,
+      "data-state": e,
+      className: a({ size: t, type: s, state: e }),
+      ...n,
+      children: o
+    }
+  );
+};
+export {
+  g as BodyCell
+};

package/dist/components/DataTable/table/BodyCheckbox.d.ts

@@ -0,0 +1,4 @@
+import { ChoiceBoxProps } from '../../ChoiceBox';
+export declare const BodyCheckbox: ({ checked, onChange, value, state, ...props }: {
+    state?: "enabled" | "hovered" | "selected";
+} & Omit<ChoiceBoxProps, "type">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/BodyCheckbox.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { ChoiceBox as i } from "../../ChoiceBox/ChoiceBox.js";
+import { DataTable as l } from "../index.js";
+const b = ({
+  checked: e,
+  onChange: r,
+  value: t,
+  state: c = "enabled",
+  ...m
+}) => /* @__PURE__ */ o(l.BodyCell, { state: c, children: /* @__PURE__ */ o(
+  i,
+  {
+    ...m,
+    type: "checkbox",
+    value: t,
+    checked: e,
+    onChange: r
+  }
+) });
+export {
+  b as BodyCheckbox
+};

package/dist/components/DataTable/table/HeaderCell.d.ts

@@ -0,0 +1,8 @@
+export declare const HeaderCell: ({ children, size, state, sortable, sortDirection, onSort, className, ...props }: React.PropsWithChildren<{
+    size?: "small" | "medium" | "large";
+    state?: "enabled" | "hovered";
+    sortable?: boolean;
+    sortDirection?: "asc" | "desc" | false;
+    onSort?: () => void;
+    className?: string;
+}> & React.ComponentProps<"th">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/HeaderCell.js

@@ -0,0 +1,79 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import { SerendieSymbol as a } from "@serendie/symbols";
+import { css as p } from "../../../styled-system/css/css.js";
+import { cx as f } from "../../../styled-system/css/cx.js";
+import { cva as y } from "../../../styled-system/css/cva.js";
+import "../../../styled-system/helpers.js";
+const u = y({
+  base: {
+    borderBottom: "1px solid",
+    borderColor: "sd.system.color.component.outline",
+    fontFamily: "Roboto, sans-serif",
+    color: "sd.system.color.component.onSurface",
+    textAlign: "left",
+    fontWeight: 400,
+    fontSize: "14px",
+    px: "sd.system.dimension.spacing.extraSmall",
+    py: "sd.system.dimension.spacing.twoExtraSmall",
+    height: "32px",
+    background: "sd.system.color.component.inversePrimary",
+    verticalAlign: "middle",
+    whiteSpace: "nowrap"
+  },
+  defaultVariants: {}
+}), C = ({
+  children: i,
+  size: d = "medium",
+  state: m = "enabled",
+  sortable: e = !1,
+  sortDirection: n,
+  onSort: o,
+  className: r,
+  ...t
+}) => /* @__PURE__ */ l(
+  "th",
+  {
+    role: "columnheader",
+    "aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : e ? "none" : void 0,
+    tabIndex: e ? 0 : void 0,
+    onClick: e ? o : void 0,
+    onKeyDown: (s) => {
+      e && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), o == null || o());
+    },
+    className: f(u({ size: d, state: m }), r),
+    style: {
+      cursor: e ? "pointer" : "default",
+      userSelect: "none"
+    },
+    ...t,
+    children: /* @__PURE__ */ c(
+      "span",
+      {
+        className: p({
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle"
+        }),
+        children: [
+          i,
+          e && (n === "asc" ? /* @__PURE__ */ l(
+            a,
+            {
+              name: "chevron-double-up",
+              style: { marginLeft: 4 }
+            }
+          ) : n === "desc" ? /* @__PURE__ */ l(
+            a,
+            {
+              name: "chevron-double-down",
+              style: { marginLeft: 4 }
+            }
+          ) : /* @__PURE__ */ l(a, { name: "chevron-up-down", style: { marginLeft: 4 } }))
+        ]
+      }
+    )
+  }
+);
+export {
+  C as HeaderCell
+};

package/dist/components/DataTable/table/HeaderCheckbox.d.ts

@@ -0,0 +1,2 @@
+import { ChoiceBoxProps } from '../../ChoiceBox';
+export declare const HeaderCheckbox: React.FC<Omit<ChoiceBoxProps, "type">>;

package/dist/components/DataTable/table/HeaderCheckbox.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ChoiceBox as m } from "../../ChoiceBox/ChoiceBox.js";
+import { DataTable as t } from "../index.js";
+import { css as i } from "../../../styled-system/css/css.js";
+import { cx as c } from "../../../styled-system/css/cx.js";
+import "../../../styled-system/helpers.js";
+const d = ({
+  className: r,
+  ...o
+}) => /* @__PURE__ */ e(t.HeaderCell, { children: /* @__PURE__ */ e(
+  m,
+  {
+    ...o,
+    type: "checkbox",
+    className: c(
+      i({
+        alignItems: "center",
+        verticalAlign: "middle"
+      }),
+      r
+    )
+  }
+) });
+export {
+  d as HeaderCheckbox
+};

package/dist/components/DataTable/table/HeaderRow.d.ts

@@ -0,0 +1,11 @@
+import { HeaderGroup } from '@tanstack/react-table';
+export interface HeaderRowProps<TData> {
+    headerGroup: HeaderGroup<TData>;
+    enableRowSelection?: boolean;
+    table: {
+        getIsAllRowsSelected: () => boolean;
+        getIsSomeRowsSelected: () => boolean;
+        getToggleAllRowsSelectedHandler: () => (event: unknown) => void;
+    };
+}
+export declare function HeaderRow<TData>({ headerGroup, enableRowSelection, table, }: HeaderRowProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/HeaderRow.js

@@ -0,0 +1,40 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { flexRender as i } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DataTable as t } from "../index.js";
+import { css as a } from "../../../styled-system/css/css.js";
+import "../../../styled-system/helpers.js";
+function p({
+  headerGroup: l,
+  enableRowSelection: n,
+  table: o
+}) {
+  return /* @__PURE__ */ m(t.Tr, { children: [
+    n && /* @__PURE__ */ r(
+      t.HeaderCheckbox,
+      {
+        checked: o.getIsSomeRowsSelected() ? "indeterminate" : !!o.getIsAllRowsSelected(),
+        onChange: o.getToggleAllRowsSelectedHandler(),
+        value: "select-all",
+        className: a({
+          verticalAlign: "middle"
+        })
+      }
+    ),
+    l.headers.map((e) => {
+      const c = e.column.getCanSort(), s = e.column.getIsSorted();
+      return /* @__PURE__ */ r(
+        t.HeaderCell,
+        {
+          sortable: c,
+          sortDirection: s,
+          onSort: () => e.column.toggleSorting(),
+          children: i(e.column.columnDef.header, e.getContext())
+        },
+        e.id
+      );
+    })
+  ] }, l.id);
+}
+export {
+  p as HeaderRow
+};

package/dist/components/DataTable/table/Root.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function Root({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Root.js

@@ -0,0 +1,34 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../../styled-system/css/css.js";
+import { cx as s } from "../../../styled-system/css/cx.js";
+import "../../../styled-system/helpers.js";
+import { sva as a } from "../../../styled-system/css/sva.js";
+const l = a({
+  slots: ["container", "table"],
+  base: {
+    container: {
+      border: "1px solid",
+      borderColor: "sd.system.color.component.outline",
+      borderRadius: "4px",
+      overflow: "hidden",
+      boxShadow: "sm",
+      background: "sd.system.color.component.surface",
+      overflowX: "auto"
+    },
+    table: {
+      w: "100%",
+      borderCollapse: "separate",
+      borderSpacing: 0
+    }
+  }
+});
+function b({
+  children: r,
+  className: t
+}) {
+  const o = l();
+  return /* @__PURE__ */ e("div", { className: s(o.container, t), children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
+}
+export {
+  b as Root
+};

package/dist/components/DataTable/table/Row.d.ts

@@ -0,0 +1,5 @@
+import { Row as TanstackRow } from '@tanstack/react-table';
+export declare function Row<TData>({ row, enableRowSelection, }: {
+    row: TanstackRow<TData>;
+    enableRowSelection?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Row.js

@@ -0,0 +1,90 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { flexRender as l } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DataTable as o } from "../index.js";
+import "../../../styled-system/css/css.js";
+import { cva as m } from "../../../styled-system/css/cva.js";
+import "../../../styled-system/helpers.js";
+const c = m({
+  base: {
+    _hover: {
+      _after: {
+        content: "''",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        w: "100%",
+        h: "100%",
+        bg: "sd.system.color.interaction.hoveredVariant",
+        zIndex: 1
+      }
+    }
+  },
+  variants: {
+    state: {
+      selected: {
+        base: {
+          _after: {
+            content: "''",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            pointerEvents: "none",
+            w: "100%",
+            h: "100%",
+            bg: "sd.system.color.component.inversePrimary",
+            zIndex: 1,
+            mixBlendMode: "multiply"
+          },
+          _hover: {
+            _after: {
+              content: "''",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              w: "100%",
+              h: "100%",
+              bg: "color-mix(in srgb, token(colors.sd.system.color.component.inversePrimary) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+              zIndex: 1,
+              mixBlendMode: "multiply"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function v({
+  row: e,
+  enableRowSelection: r
+}) {
+  return /* @__PURE__ */ i(
+    o.Tr,
+    {
+      className: c({
+        state: e.getIsSelected() ? "selected" : void 0
+      }),
+      children: [
+        r && /* @__PURE__ */ n(
+          o.BodyCheckbox,
+          {
+            checked: e.getIsSelected(),
+            onChange: e.getToggleSelectedHandler(),
+            value: e.id
+          }
+        ),
+        e.getVisibleCells().map((t) => {
+          const s = a(t);
+          return /* @__PURE__ */ n(o.BodyCell, { type: s, children: l(t.column.columnDef.cell, t.getContext()) }, t.id);
+        })
+      ]
+    }
+  );
+}
+function a(e) {
+  return e.column.columnDef.meta && "getType" in e.column.columnDef.meta && typeof e.column.columnDef.meta.getType == "function" ? e.column.columnDef.meta.getType(e.row.original) : "default";
+}
+export {
+  v as Row
+};

package/dist/components/DataTable/table/Tbody.d.ts

@@ -0,0 +1 @@
+export declare function Tbody({ children, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Tbody.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+function b({ children: o, ...r }) {
+  return /* @__PURE__ */ t("tbody", { ...r, children: o });
+}
+export {
+  b as Tbody
+};

package/dist/components/DataTable/table/Thead.d.ts

@@ -0,0 +1 @@
+export declare function Thead({ children, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Thead.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+function n({ children: r, ...t }) {
+  return /* @__PURE__ */ e("thead", { ...t, children: r });
+}
+export {
+  n as Thead
+};

package/dist/components/DataTable/table/Tr.d.ts

@@ -0,0 +1 @@
+export declare function Tr({ children, className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Tr.js

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import { css as m } from "../../../styled-system/css/css.js";
+import { cx as e } from "../../../styled-system/css/cx.js";
+import "../../../styled-system/helpers.js";
+function n({
+  children: r,
+  className: o,
+  ...t
+}) {
+  return /* @__PURE__ */ i(
+    "tr",
+    {
+      role: "row",
+      className: e(
+        m({
+          position: "relative"
+        }),
+        o
+      ),
+      ...t,
+      children: r
+    }
+  );
+}
+export {
+  n as Tr
+};

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

@@ -0,0 +1,10 @@
+export { Root } from './Root';
+export { Thead } from './Thead';
+export { Tr } from './Tr';
+export { Row } from './Row';
+export { HeaderRow } from './HeaderRow';
+export { BodyCell } from './BodyCell';
+export { HeaderCheckbox } from './HeaderCheckbox';
+export { BodyCheckbox } from './BodyCheckbox';
+export { Tbody } from './Tbody';
+export { HeaderCell } from './HeaderCell';

package/dist/components/DataTable/table/index.js

@@ -0,0 +1,22 @@
+import { Root as e } from "./Root.js";
+import { Thead as t } from "./Thead.js";
+import { Tr as m } from "./Tr.js";
+import { Row as d } from "./Row.js";
+import { HeaderRow as l } from "./HeaderRow.js";
+import { BodyCell as b } from "./BodyCell.js";
+import { HeaderCheckbox as y } from "./HeaderCheckbox.js";
+import { BodyCheckbox as R } from "./BodyCheckbox.js";
+import { Tbody as c } from "./Tbody.js";
+import { HeaderCell as w } from "./HeaderCell.js";
+export {
+  b as BodyCell,
+  R as BodyCheckbox,
+  w as HeaderCell,
+  y as HeaderCheckbox,
+  l as HeaderRow,
+  e as Root,
+  d as Row,
+  c as Tbody,
+  t as Thead,
+  m as Tr
+};

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import { MenuRootProps } from '@ark-ui/react';
-export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
+export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "button" | "item" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "button" | "item" | "itemGroup" | "itemIcon" | "buttonIcon">>;
 export type MenuItemProps = {
     value: string;
     label: string;