@d4gger/design-system 2.7.0

package/dist/components/dataTable/DataTableToolbar.js

@@ -0,0 +1,234 @@
+"use client";
+import * as React from "react";
+import classNames from "classnames";
+import { Badge } from "../badge/Badge.js";
+import { Button } from "../button/Button.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdownMenu/DropdownMenu.js";
+import { Input } from "../input/Input.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const DATA_TABLE_TOOLBAR_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: "var(--dsx-space-sm)",
+  padding: "var(--dsx-space-md)"
+};
+const DATA_TABLE_TOOLBAR_SEARCH_STYLE = {
+  flex: "1 1 200px",
+  minWidth: "160px"
+};
+function DataTableToolbarSearch({
+  value,
+  defaultValue = "",
+  placeholder = "Search rows",
+  onChange
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  function handleChange(event) {
+    const nextValue = event.currentTarget.value;
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "aria-label": "Search table rows",
+      density: "sm",
+      onChange: handleChange,
+      placeholder,
+      style: DATA_TABLE_TOOLBAR_SEARCH_STYLE,
+      type: "search",
+      value: currentValue
+    }
+  );
+}
+DataTableToolbarSearch.displayName = "DataTableToolbarSearch";
+function DataTableToolbarColumnVisibility({
+  columns,
+  visibleColumnIds,
+  defaultVisibleColumnIds,
+  onVisibleColumnIdsChange
+}) {
+  const allColumnIds = React.useMemo(() => new Set(columns.map((col) => col.id)), [columns]);
+  const [internalVisibleIds, setInternalVisibleIds] = React.useState(
+    () => defaultVisibleColumnIds ?? allColumnIds
+  );
+  const isControlled = visibleColumnIds !== void 0;
+  const currentVisibleIds = isControlled ? visibleColumnIds : internalVisibleIds;
+  const visibleCount = currentVisibleIds.size;
+  const totalCount = allColumnIds.size;
+  function handleToggle(columnId, checked) {
+    const nextIds = new Set(currentVisibleIds);
+    if (checked) {
+      nextIds.add(columnId);
+    } else {
+      nextIds.delete(columnId);
+    }
+    if (!isControlled) {
+      setInternalVisibleIds(nextIds);
+    }
+    onVisibleColumnIdsChange?.(nextIds);
+  }
+  function handleShowAll() {
+    if (!isControlled) {
+      setInternalVisibleIds(allColumnIds);
+    }
+    onVisibleColumnIdsChange?.(allColumnIds);
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", trailingIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25BE" }), children: [
+      "Columns",
+      visibleCount < totalCount && /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "primary", style: { marginLeft: "var(--dsx-space-xs)" }, children: [
+        visibleCount,
+        "/",
+        totalCount
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", style: { minWidth: "200px", maxHeight: "320px", overflow: "auto" }, children: [
+      columns.map((column) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: currentVisibleIds.has(column.id),
+          onCheckedChange: (checked) => handleToggle(column.id, checked === true),
+          children: column.header
+        },
+        column.id
+      )),
+      visibleCount < totalCount && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, { checked: false, onCheckedChange: handleShowAll, children: "Show all" })
+      ] })
+    ] })
+  ] });
+}
+DataTableToolbarColumnVisibility.displayName = "DataTableToolbarColumnVisibility";
+function stringifyCellValue(value) {
+  if (value == null) return "";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
+  if (value instanceof Date) return value.toISOString();
+  if (Array.isArray(value)) return value.map(stringifyCellValue).join(" ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function escapeCsvCell(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n") || value.includes("\r")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function exportAsCsv(data, columns) {
+  const headers = columns.map((col) => escapeCsvCell(String(col.header)));
+  const rows = data.map(
+    (row) => columns.map((col) => {
+      const value = col.accessorKey ? row[col.accessorKey] : void 0;
+      return escapeCsvCell(stringifyCellValue(value));
+    }).join(",")
+  );
+  return [headers.join(","), ...rows].join("\n");
+}
+function exportAsJson(data, columns) {
+  const keys = columns.map((col) => col.accessorKey).filter((key) => key !== void 0);
+  const projected = data.map((row) => {
+    const result = {};
+    for (const key of keys) {
+      result[key] = row[key];
+    }
+    return result;
+  });
+  return JSON.stringify(projected, null, 2);
+}
+function DataTableToolbarExport({
+  data,
+  columns,
+  format = "csv",
+  filename = "table-export",
+  onExport
+}) {
+  const [selectedFormat, setSelectedFormat] = React.useState(format);
+  function handleExport(exportFormat) {
+    const exportData = exportFormat === "csv" ? exportAsCsv(data, columns) : exportAsJson(data, columns);
+    onExport?.(exportFormat, exportData);
+    const blob = new Blob([exportData], { type: exportFormat === "csv" ? "text/csv" : "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${filename}.${exportFormat}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", trailingIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25BE" }), children: "Export" }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: selectedFormat === "csv",
+          onCheckedChange: () => {
+            setSelectedFormat("csv");
+            handleExport("csv");
+          },
+          children: "CSV"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: selectedFormat === "json",
+          onCheckedChange: () => {
+            setSelectedFormat("json");
+            handleExport("json");
+          },
+          children: "JSON"
+        }
+      )
+    ] })
+  ] });
+}
+DataTableToolbarExport.displayName = "DataTableToolbarExport";
+function DataTableToolbarRowCount({ total, filtered, selected }) {
+  const showFiltered = filtered !== void 0 && filtered !== total;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--dsx-space-xs)", fontSize: "var(--dsx-font-size-xs)", color: "var(--dsx-color-on-surface-variant)" }, children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      showFiltered ? `${filtered} of ${total}` : `${total}`,
+      " row",
+      total !== 1 ? "s" : ""
+    ] }),
+    selected !== void 0 && selected > 0 && /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "primary", children: [
+      selected,
+      " selected"
+    ] })
+  ] });
+}
+DataTableToolbarRowCount.displayName = "DataTableToolbarRowCount";
+function DataTableToolbar({ className, children, style, ...restProps }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      className: classNames("dsx-data-table-toolbar", className),
+      style: { ...DATA_TABLE_TOOLBAR_STYLE, ...style },
+      children
+    }
+  );
+}
+DataTableToolbar.displayName = "DataTableToolbar";
+const DataTableToolbarComponent = Object.assign(DataTableToolbar, {
+  Search: DataTableToolbarSearch,
+  ColumnVisibility: DataTableToolbarColumnVisibility,
+  Export: DataTableToolbarExport,
+  RowCount: DataTableToolbarRowCount
+});
+export {
+  DataTableToolbarComponent as DataTableToolbar,
+  DataTableToolbarColumnVisibility,
+  DataTableToolbarExport,
+  DataTableToolbarRowCount,
+  DataTableToolbarSearch
+};
+//# sourceMappingURL=DataTableToolbar.js.map

package/dist/components/dataTable/DataTableToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataTable/DataTableToolbar.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Badge } from '../badge/Badge'\nimport { Button } from '../button/Button'\nimport { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuTrigger } from '../dropdownMenu/DropdownMenu'\nimport { Input } from '../input/Input'\n\nimport type { DataTableColumn } from './DataTable'\n\nconst DATA_TABLE_TOOLBAR_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: 'var(--dsx-space-sm)',\n  padding: 'var(--dsx-space-md)',\n}\n\nconst DATA_TABLE_TOOLBAR_SEARCH_STYLE: React.CSSProperties = {\n  flex: '1 1 200px',\n  minWidth: '160px',\n}\n\ntype DataTableToolbarSearchProps = {\n  value?: string\n  defaultValue?: string\n  placeholder?: string\n  onChange?: (value: string) => void\n}\n\nfunction DataTableToolbarSearch({\n  value,\n  defaultValue = '',\n  placeholder = 'Search rows',\n  onChange,\n}: DataTableToolbarSearchProps) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n  const isControlled = value !== undefined\n  const currentValue = isControlled ? value : internalValue\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const nextValue = event.currentTarget.value\n    if (!isControlled) {\n      setInternalValue(nextValue)\n    }\n    onChange?.(nextValue)\n  }\n\n  return (\n    <Input\n      aria-label=\"Search table rows\"\n      density=\"sm\"\n      onChange={handleChange}\n      placeholder={placeholder}\n      style={DATA_TABLE_TOOLBAR_SEARCH_STYLE}\n      type=\"search\"\n      value={currentValue}\n    />\n  )\n}\nDataTableToolbarSearch.displayName = 'DataTableToolbarSearch'\n\ntype DataTableToolbarColumnVisibilityProps<Row> = {\n  columns: Array<DataTableColumn<Row>>\n  visibleColumnIds?: Set<string>\n  defaultVisibleColumnIds?: Set<string>\n  onVisibleColumnIdsChange?: (visibleColumnIds: Set<string>) => void\n}\n\nfunction DataTableToolbarColumnVisibility<Row extends Record<string, unknown>>({\n  columns,\n  visibleColumnIds,\n  defaultVisibleColumnIds,\n  onVisibleColumnIdsChange,\n}: DataTableToolbarColumnVisibilityProps<Row>) {\n  const allColumnIds = React.useMemo(() => new Set(columns.map((col) => col.id)), [columns])\n\n  const [internalVisibleIds, setInternalVisibleIds] = React.useState<Set<string>>(\n    () => defaultVisibleColumnIds ?? allColumnIds,\n  )\n\n  const isControlled = visibleColumnIds !== undefined\n  const currentVisibleIds = isControlled ? visibleColumnIds : internalVisibleIds\n  const visibleCount = currentVisibleIds.size\n  const totalCount = allColumnIds.size\n\n  function handleToggle(columnId: string, checked: boolean) {\n    const nextIds = new Set(currentVisibleIds)\n    if (checked) {\n      nextIds.add(columnId)\n    } else {\n      nextIds.delete(columnId)\n    }\n    if (!isControlled) {\n      setInternalVisibleIds(nextIds)\n    }\n    onVisibleColumnIdsChange?.(nextIds)\n  }\n\n  function handleShowAll() {\n    if (!isControlled) {\n      setInternalVisibleIds(allColumnIds)\n    }\n    onVisibleColumnIdsChange?.(allColumnIds)\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" variant=\"outline\" trailingIcon={<span aria-hidden=\"true\">\u25BE</span>}>\n          Columns\n          {visibleCount < totalCount && (\n            <Badge size=\"sm\" variant=\"primary\" style={{ marginLeft: 'var(--dsx-space-xs)' }}>\n              {visibleCount}/{totalCount}\n            </Badge>\n          )}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" style={{ minWidth: '200px', maxHeight: '320px', overflow: 'auto' }}>\n        {columns.map((column) => (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            checked={currentVisibleIds.has(column.id)}\n            onCheckedChange={(checked) => handleToggle(column.id, checked === true)}\n          >\n            {column.header}\n          </DropdownMenuCheckboxItem>\n        ))}\n        {visibleCount < totalCount && (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem checked={false} onCheckedChange={handleShowAll}>\n              Show all\n            </DropdownMenuCheckboxItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\nDataTableToolbarColumnVisibility.displayName = 'DataTableToolbarColumnVisibility'\n\ntype DataTableToolbarExportFormat = 'csv' | 'json'\n\ntype DataTableToolbarExportProps<Row> = {\n  data: Row[]\n  columns: Array<DataTableColumn<Row>>\n  format?: DataTableToolbarExportFormat\n  filename?: string\n  onExport?: (format: DataTableToolbarExportFormat, data: string) => void\n}\n\nfunction stringifyCellValue(value: unknown): string {\n  if (value == null) return ''\n  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return String(value)\n  if (value instanceof Date) return value.toISOString()\n  if (Array.isArray(value)) return value.map(stringifyCellValue).join(' ')\n  if (typeof value === 'object') return JSON.stringify(value)\n  return String(value)\n}\n\nfunction escapeCsvCell(value: string): string {\n  if (value.includes(',') || value.includes('\"') || value.includes('\\n') || value.includes('\\r')) {\n    return `\"${value.replace(/\"/g, '\"\"')}\"`\n  }\n  return value\n}\n\nfunction exportAsCsv<Row extends Record<string, unknown>>(\n  data: Row[],\n  columns: Array<DataTableColumn<Row>>,\n): string {\n  const headers = columns.map((col) => escapeCsvCell(String(col.header)))\n  const rows = data.map((row) =>\n    columns\n      .map((col) => {\n        const value = col.accessorKey ? row[col.accessorKey] : undefined\n        return escapeCsvCell(stringifyCellValue(value))\n      })\n      .join(','),\n  )\n  return [headers.join(','), ...rows].join('\\n')\n}\n\nfunction exportAsJson<Row extends Record<string, unknown>>(\n  data: Row[],\n  columns: Array<DataTableColumn<Row>>,\n): string {\n  const keys = columns.map((col) => col.accessorKey).filter((key): key is keyof Row => key !== undefined)\n  const projected = data.map((row) => {\n    const result: Partial<Row> = {}\n    for (const key of keys) {\n      result[key] = row[key]\n    }\n    return result\n  })\n  return JSON.stringify(projected, null, 2)\n}\n\nfunction DataTableToolbarExport<Row extends Record<string, unknown>>({\n  data,\n  columns,\n  format = 'csv',\n  filename = 'table-export',\n  onExport,\n}: DataTableToolbarExportProps<Row>) {\n  const [selectedFormat, setSelectedFormat] = React.useState<DataTableToolbarExportFormat>(format)\n\n  function handleExport(exportFormat: DataTableToolbarExportFormat) {\n    const exportData = exportFormat === 'csv' ? exportAsCsv(data, columns) : exportAsJson(data, columns)\n    onExport?.(exportFormat, exportData)\n\n    const blob = new Blob([exportData], { type: exportFormat === 'csv' ? 'text/csv' : 'application/json' })\n    const url = URL.createObjectURL(blob)\n    const link = document.createElement('a')\n    link.href = url\n    link.download = `${filename}.${exportFormat}`\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n    URL.revokeObjectURL(url)\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" variant=\"outline\" trailingIcon={<span aria-hidden=\"true\">\u25BE</span>}>\n          Export\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuCheckboxItem\n          checked={selectedFormat === 'csv'}\n          onCheckedChange={() => {\n            setSelectedFormat('csv')\n            handleExport('csv')\n          }}\n        >\n          CSV\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={selectedFormat === 'json'}\n          onCheckedChange={() => {\n            setSelectedFormat('json')\n            handleExport('json')\n          }}\n        >\n          JSON\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\nDataTableToolbarExport.displayName = 'DataTableToolbarExport'\n\ntype DataTableToolbarRowCountProps = {\n  total: number\n  filtered?: number\n  selected?: number\n}\n\nfunction DataTableToolbarRowCount({ total, filtered, selected }: DataTableToolbarRowCountProps) {\n  const showFiltered = filtered !== undefined && filtered !== total\n\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--dsx-space-xs)', fontSize: 'var(--dsx-font-size-xs)', color: 'var(--dsx-color-on-surface-variant)' }}>\n      <span>\n        {showFiltered ? `${filtered} of ${total}` : `${total}`} row{total !== 1 ? 's' : ''}\n      </span>\n      {selected !== undefined && selected > 0 && (\n        <Badge size=\"sm\" variant=\"primary\">\n          {selected} selected\n        </Badge>\n      )}\n    </div>\n  )\n}\nDataTableToolbarRowCount.displayName = 'DataTableToolbarRowCount'\n\ntype DataTableToolbarProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction DataTableToolbar({ className, children, style, ...restProps }: DataTableToolbarProps) {\n  return (\n    <div\n      {...restProps}\n      className={classNames('dsx-data-table-toolbar', className)}\n      style={{ ...DATA_TABLE_TOOLBAR_STYLE, ...style }}\n    >\n      {children}\n    </div>\n  )\n}\nDataTableToolbar.displayName = 'DataTableToolbar'\n\nconst DataTableToolbarComponent = Object.assign(DataTableToolbar, {\n  Search: DataTableToolbarSearch,\n  ColumnVisibility: DataTableToolbarColumnVisibility,\n  Export: DataTableToolbarExport,\n  RowCount: DataTableToolbarRowCount,\n})\n\nexport {\n  DataTableToolbarComponent as DataTableToolbar,\n  DataTableToolbarColumnVisibility,\n  DataTableToolbarExport,\n  DataTableToolbarRowCount,\n  DataTableToolbarSearch,\n}\nexport type {\n  DataTableToolbarExportFormat,\n  DataTableToolbarExportProps,\n  DataTableToolbarProps,\n  DataTableToolbarRowCountProps,\n  DataTableToolbarSearchProps,\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/dataTable/dataTable.props.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dataTable_props_exports = {};
+__export(dataTable_props_exports, {
+  dataTablePropDefs: () => dataTablePropDefs
+});
+module.exports = __toCommonJS(dataTable_props_exports);
+const dataTableSizes = ["sm", "md", "lg"];
+const dataTablePropDefs = {
+  emptyState: {
+    type: "ReactNode",
+    default: "No results."
+  },
+  size: {
+    type: "enum",
+    values: dataTableSizes,
+    default: "md"
+  }
+};
+//# sourceMappingURL=dataTable.props.cjs.map

package/dist/components/dataTable/dataTable.props.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataTable/dataTable.props.ts"],
+  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst dataTableSizes = ['sm', 'md', 'lg'] as const\n\nconst dataTablePropDefs = {\n  emptyState: {\n    type: 'ReactNode',\n    default: 'No results.',\n  },\n  size: {\n    type: 'enum',\n    values: dataTableSizes,\n    default: 'md',\n  },\n} satisfies {\n  emptyState: PropDef\n  size: PropDef<(typeof dataTableSizes)[number]>\n}\n\nexport { dataTablePropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AAExC,MAAM,oBAAoB;AAAA,EACxB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/components/dataTable/dataTable.props.d.cts

@@ -0,0 +1,13 @@
+declare const dataTablePropDefs: {
+    emptyState: {
+        type: "ReactNode";
+        default: string;
+    };
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+};
+export { dataTablePropDefs };
+//# sourceMappingURL=dataTable.props.d.cts.map

package/dist/components/dataTable/dataTable.props.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTable.props.d.cts","sourceRoot":"","sources":["../../../src/components/dataTable/dataTable.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,iBAAiB;;;;;;;;;;CAatB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/dataTable/dataTable.props.d.mts

@@ -0,0 +1,13 @@
+declare const dataTablePropDefs: {
+    emptyState: {
+        type: "ReactNode";
+        default: string;
+    };
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+};
+export { dataTablePropDefs };
+//# sourceMappingURL=dataTable.props.d.mts.map

package/dist/components/dataTable/dataTable.props.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTable.props.d.mts","sourceRoot":"","sources":["../../../src/components/dataTable/dataTable.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,iBAAiB;;;;;;;;;;CAatB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/dataTable/dataTable.props.d.ts

@@ -0,0 +1,13 @@
+declare const dataTablePropDefs: {
+    emptyState: {
+        type: "ReactNode";
+        default: string;
+    };
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+};
+export { dataTablePropDefs };
+//# sourceMappingURL=dataTable.props.d.ts.map

package/dist/components/dataTable/dataTable.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTable.props.d.ts","sourceRoot":"","sources":["../../../src/components/dataTable/dataTable.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,iBAAiB;;;;;;;;;;CAatB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/dataTable/dataTable.props.js

@@ -0,0 +1,16 @@
+const dataTableSizes = ["sm", "md", "lg"];
+const dataTablePropDefs = {
+  emptyState: {
+    type: "ReactNode",
+    default: "No results."
+  },
+  size: {
+    type: "enum",
+    values: dataTableSizes,
+    default: "md"
+  }
+};
+export {
+  dataTablePropDefs
+};
+//# sourceMappingURL=dataTable.props.js.map

package/dist/components/dataTable/dataTable.props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataTable/dataTable.props.ts"],
+  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst dataTableSizes = ['sm', 'md', 'lg'] as const\n\nconst dataTablePropDefs = {\n  emptyState: {\n    type: 'ReactNode',\n    default: 'No results.',\n  },\n  size: {\n    type: 'enum',\n    values: dataTableSizes,\n    default: 'md',\n  },\n} satisfies {\n  emptyState: PropDef\n  size: PropDef<(typeof dataTableSizes)[number]>\n}\n\nexport { dataTablePropDefs }\n"],
+  "mappings": "AAEA,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AAExC,MAAM,oBAAoB;AAAA,EACxB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/components/datePicker/DatePicker.cjs

@@ -0,0 +1,181 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DatePicker_exports = {};
+__export(DatePicker_exports, {
+  DatePicker: () => DatePicker
+});
+module.exports = __toCommonJS(DatePicker_exports);
+var React = __toESM(require("react"), 1);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_Theme = require("../../foundations/Theme");
+var import_extractProps = require("../../_internal/helpers/extractProps");
+var import_Icon = require("../icon/Icon");
+var import_Popover = require("../popover/Popover");
+var import_datePicker = require("./datePicker.props");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Calendar = React.lazy(
+  () => import("../calendar/Calendar").then((mod) => ({ default: mod.Calendar }))
+);
+function useControllableValue({
+  value: valueProp,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const value = valueProp ?? uncontrolledValue;
+  const setValue = React.useCallback(
+    (nextValue) => {
+      if (valueProp === void 0) {
+        setUncontrolledValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [onChange, valueProp]
+  );
+  return [value, setValue];
+}
+function useControllableOpenState({
+  open: openProp,
+  defaultOpen,
+  onOpenChange
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      if (openProp === void 0) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange, openProp]
+  );
+  return [open, setOpen];
+}
+function defaultFormatDate(value) {
+  return value.toLocaleDateString(void 0, {
+    dateStyle: "medium"
+  });
+}
+const DatePicker = React.forwardRef((props, forwardedRef) => {
+  const {
+    asChild,
+    calendarProps,
+    className: propClassName,
+    defaultOpen,
+    defaultValue,
+    formatDate = defaultFormatDate,
+    onOpenChange,
+    onValueChange,
+    open: openProp,
+    placeholder = "Pick a date",
+    popoverContentProps,
+    size: sizeProp = "md",
+    type = "button",
+    value: valueProp,
+    variant: _variantProp = "default",
+    ...propsWithoutControlledValues
+  } = props;
+  const [value, setValue] = useControllableValue({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [open, setOpen] = useControllableOpenState({
+    open: openProp,
+    defaultOpen,
+    onOpenChange
+  });
+  const { asChild: extractedAsChild, className, ...triggerProps } = (0, import_extractProps.extractProps)(
+    {
+      ...propsWithoutControlledValues,
+      asChild,
+      className: propClassName,
+      size: sizeProp,
+      variant: _variantProp
+    },
+    import_datePicker.datePickerPropDefs
+  );
+  const size = sizeProp;
+  const TriggerComp = extractedAsChild ? import_react_slot.Slot : "button";
+  const { className: calendarClassName, ...resolvedCalendarProps } = calendarProps ?? {};
+  const { className: popoverContentClassName, align = "start", sideOffset = 8, ...resolvedPopoverContentProps } = popoverContentProps ?? {};
+  const handleSelect = React.useCallback(
+    (nextValue) => {
+      setValue(nextValue);
+      setOpen(false);
+    },
+    [setOpen, setValue]
+  );
+  const label = value ? formatDate(value) : placeholder;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      TriggerComp,
+      {
+        ...triggerProps,
+        ref: forwardedRef,
+        ...!extractedAsChild ? { type } : {},
+        className: (0, import_classnames.default)("dsx-date-picker__trigger", className),
+        "data-placeholder": value ? void 0 : "true",
+        "data-size": size,
+        children: [
+          extractedAsChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children: propsWithoutControlledValues.children }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dsx-date-picker__value", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "calendar", size: "sm", className: "dsx-date-picker__leading-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-date-picker__label", children: label })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "chevron-down", size: "sm", className: "dsx-date-picker__icon" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Popover.Popover.Content,
+      {
+        ...resolvedPopoverContentProps,
+        align,
+        className: (0, import_classnames.default)("dsx-date-picker__content", popoverContentClassName),
+        sideOffset,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, { appearance: "inherit", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Calendar,
+          {
+            ...resolvedCalendarProps,
+            mode: "single",
+            selected: value,
+            onSelect: handleSelect,
+            className: (0, import_classnames.default)("dsx-date-picker__calendar", calendarClassName)
+          }
+        ) }) })
+      }
+    )
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+//# sourceMappingURL=DatePicker.cjs.map

package/dist/components/datePicker/DatePicker.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/datePicker/DatePicker.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { Theme } from '../../foundations/Theme'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport type { CalendarProps } from '../calendar/Calendar'\nimport { Popover, type PopoverContentProps } from '../popover/Popover'\nimport { datePickerPropDefs } from './datePicker.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst Calendar = React.lazy(() =>\n  import('../calendar/Calendar').then((mod) => ({ default: mod.Calendar })),\n)\n\ntype DatePickerOwnProps = GetPropDefTypes<typeof datePickerPropDefs> & {\n  calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect'>\n  defaultOpen?: boolean\n  defaultValue?: Date\n  formatDate?: (value: Date) => string\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: Date | undefined) => void\n  open?: boolean\n  placeholder?: string\n  popoverContentProps?: Omit<PopoverContentProps, 'children'>\n  value?: Date\n}\n\ntype DatePickerSize = NonNullable<DatePickerOwnProps['size']>\ntype DatePickerVariant = NonNullable<DatePickerOwnProps['variant']>\n\ninterface DatePickerProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'defaultValue' | 'onChange' | 'value'>,\n    DatePickerOwnProps {}\n\nfunction useControllableValue<T>({\n  value: valueProp,\n  defaultValue,\n  onChange,\n}: {\n  defaultValue: T | undefined\n  onChange?: (value: T | undefined) => void\n  value: T | undefined\n}) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const value = valueProp ?? uncontrolledValue\n\n  const setValue = React.useCallback(\n    (nextValue: T | undefined) => {\n      if (valueProp === undefined) {\n        setUncontrolledValue(nextValue)\n      }\n\n      onChange?.(nextValue)\n    },\n    [onChange, valueProp],\n  )\n\n  return [value, setValue] as const\n}\n\nfunction useControllableOpenState({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n}: Pick<DatePickerProps, 'defaultOpen' | 'onOpenChange' | 'open'>) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)\n  const open = openProp ?? uncontrolledOpen\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean) => {\n      if (openProp === undefined) {\n        setUncontrolledOpen(nextOpen)\n      }\n\n      onOpenChange?.(nextOpen)\n    },\n    [onOpenChange, openProp],\n  )\n\n  return [open, setOpen] as const\n}\n\nfunction defaultFormatDate(value: Date) {\n  return value.toLocaleDateString(undefined, {\n    dateStyle: 'medium',\n  })\n}\n\nconst DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    calendarProps,\n    className: propClassName,\n    defaultOpen,\n    defaultValue,\n    formatDate = defaultFormatDate,\n    onOpenChange,\n    onValueChange,\n    open: openProp,\n    placeholder = 'Pick a date',\n    popoverContentProps,\n    size: sizeProp = 'md',\n    type = 'button',\n    value: valueProp,\n    variant: _variantProp = 'default',\n    ...propsWithoutControlledValues\n  } = props\n  const [value, setValue] = useControllableValue<Date>({\n    value: valueProp,\n    defaultValue,\n    onChange: onValueChange,\n  })\n  const [open, setOpen] = useControllableOpenState({\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n  })\n  const { asChild: extractedAsChild, className, ...triggerProps } = extractProps(\n    {\n      ...propsWithoutControlledValues,\n      asChild,\n      className: propClassName,\n      size: sizeProp,\n      variant: _variantProp,\n    },\n    datePickerPropDefs,\n  )\n  const size = sizeProp\n  const TriggerComp = extractedAsChild ? Slot : 'button'\n\n  const { className: calendarClassName, ...resolvedCalendarProps } = calendarProps ?? {}\n  const { className: popoverContentClassName, align = 'start', sideOffset = 8, ...resolvedPopoverContentProps } =\n    popoverContentProps ?? {}\n\n  const handleSelect = React.useCallback(\n    (nextValue: Date | undefined) => {\n      setValue(nextValue)\n      setOpen(false)\n    },\n    [setOpen, setValue],\n  )\n\n  const label = value ? formatDate(value) : placeholder\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        <TriggerComp\n          {...triggerProps}\n          ref={forwardedRef}\n          {...(!extractedAsChild ? { type } : {})}\n          className={classNames('dsx-date-picker__trigger', className)}\n          data-placeholder={value ? undefined : 'true'}\n          data-size={size}\n        >\n          {extractedAsChild ? <Slottable>{propsWithoutControlledValues.children}</Slottable> : null}\n          <span className=\"dsx-date-picker__value\">\n            <Icon name=\"calendar\" size=\"sm\" className=\"dsx-date-picker__leading-icon\" />\n            <span className=\"dsx-date-picker__label\">{label}</span>\n          </span>\n          <Icon name=\"chevron-down\" size=\"sm\" className=\"dsx-date-picker__icon\" />\n        </TriggerComp>\n      </Popover.Trigger>\n      <Popover.Content\n        {...resolvedPopoverContentProps}\n        align={align}\n        className={classNames('dsx-date-picker__content', popoverContentClassName)}\n        sideOffset={sideOffset}\n      >\n        <Theme appearance=\"inherit\">\n          <React.Suspense fallback={null}>\n            <Calendar\n              {...resolvedCalendarProps}\n              mode=\"single\"\n              selected={value}\n              onSelect={handleSelect}\n              className={classNames('dsx-date-picker__calendar', calendarClassName)}\n            />\n          </React.Suspense>\n        </Theme>\n      </Popover.Content>\n    </Popover>\n  )\n})\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\nexport type { DatePickerProps, DatePickerSize, DatePickerVariant }\n"],
+  "mappings": "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",
+  "names": ["classNames"]
+}

package/dist/components/datePicker/DatePicker.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { CalendarProps } from '../calendar/Calendar.cjs';
+import { type PopoverContentProps } from '../popover/Popover.cjs';
+import { datePickerPropDefs } from './datePicker.props.cjs';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.cjs';
+type DatePickerOwnProps = GetPropDefTypes<typeof datePickerPropDefs> & {
+    calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect'>;
+    defaultOpen?: boolean;
+    defaultValue?: Date;
+    formatDate?: (value: Date) => string;
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: Date | undefined) => void;
+    open?: boolean;
+    placeholder?: string;
+    popoverContentProps?: Omit<PopoverContentProps, 'children'>;
+    value?: Date;
+};
+type DatePickerSize = NonNullable<DatePickerOwnProps['size']>;
+type DatePickerVariant = NonNullable<DatePickerOwnProps['variant']>;
+interface DatePickerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'defaultValue' | 'onChange' | 'value'>, DatePickerOwnProps {
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export { DatePicker };
+export type { DatePickerProps, DatePickerSize, DatePickerVariant };
+//# sourceMappingURL=DatePicker.d.cts.map

package/dist/components/datePicker/DatePicker.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.cts","sourceRoot":"","sources":["../../../src/components/datePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAW,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAEvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAMpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACrE,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAA;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAA;IAC3D,KAAK,CAAC,EAAE,IAAI,CAAA;CACb,CAAA;AAED,KAAK,cAAc,GAAG,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAA;AAC7D,KAAK,iBAAiB,GAAG,WAAW,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAA;AAEnE,UAAU,eACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC,EAChG,kBAAkB;CAAG;AAwDzB,QAAA,MAAM,UAAU,2FA+Fd,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAA"}