@caspeco/casper-ui-library 0.0.1

package/dist/components/table/table-toolbar.js

@@ -0,0 +1,108 @@
+import { jsx as t, jsxs as o, Fragment as F } from "react/jsx-runtime";
+import { memo as L, useContext as j, useCallback as z, useMemo as g } from "react";
+import { useMediaQuery as O, Flex as i, Box as v, Portal as A } from "@chakra-ui/react";
+import { translations as H } from "./translations.js";
+import { TableContext as E } from "./table-context.js";
+import { Text as f } from "../text/text.js";
+import { Input as G } from "../input/input.js";
+import { Icon as C } from "../icon/icon.js";
+import { Icons as m } from "../icon/types.js";
+import { Menu as D } from "../menu/menu.js";
+import { MenuButton as N } from "../menu/menu-button.js";
+import { MenuList as P } from "../menu/menu-list.js";
+import { MenuItem as k } from "../menu/menu-item.js";
+import { Checkbox as Q } from "../checkbox/checkbox.js";
+import { MenuDivider as W } from "../menu/menu-divider.js";
+import { Switch as X } from "../switch/switch.js";
+import { IconButton as q } from "../icon-button/icon-button.js";
+import { ThemeSpaceVariable as r, ThemeFontVariable as J, ThemeColorVariable as S, ThemeFontSizeVariable as K, ThemeIconSizeVariable as R } from "../../theme/theme-types.js";
+function U({
+  tableName: T,
+  onSearch: c,
+  onAddNewItem: y,
+  ...M
+}) {
+  const e = j(E);
+  if (!e) throw new Error("No table context found");
+  const [x] = O("(min-width: 48em)"), l = H[e.localeString], s = z(() => e.table.getAllColumns().length === Object.keys(e.breakingContentState).length && !Object.values(e.breakingContentState).includes(!1), [e.breakingContentState]), I = (n) => {
+    var d;
+    const a = {};
+    e.table.getAllColumns().forEach((V) => {
+      a[V.id] = n.target.checked;
+    }), e.setBreakingContentState(a), (d = e.onBreakingContentChange) == null || d.call(e, a);
+  }, u = () => /* @__PURE__ */ t(
+    G,
+    {
+      leftElement: /* @__PURE__ */ t(C, { icon: m.Search }),
+      onChange: (n) => c == null ? void 0 : c(n),
+      size: "md",
+      type: "search",
+      w: { base: "100%", md: "170px" },
+      "data-testid": "filterInput"
+    }
+  ), h = () => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ o(D, { closeOnSelect: !1, isLazy: !0, children: [
+    /* @__PURE__ */ t(N, { "aria-label": l.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ t(C, { icon: m.Sliders, size: R.Medium }) }),
+    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ o(P, { children: [
+      /* @__PURE__ */ t(
+        f,
+        {
+          color: S.OnSurfaceSubdued,
+          py: r.Small,
+          px: r.Medium,
+          children: l.showColumns
+        }
+      ),
+      e.table.getAllLeafColumns().filter((n) => n.getCanHide()).map((n) => /* @__PURE__ */ o(k, { itemType: "checkbox", leftIcon: m.GripMore, children: [
+        /* @__PURE__ */ t(F, { children: n.columnDef.header }),
+        /* @__PURE__ */ t(
+          Q,
+          {
+            isChecked: n.getIsVisible(),
+            onChange: n.getToggleVisibilityHandler()
+          }
+        )
+      ] }, n.id)),
+      /* @__PURE__ */ t(W, {}),
+      /* @__PURE__ */ o(k, { itemType: "switch", children: [
+        l.breakingContent,
+        /* @__PURE__ */ t(X, { onChange: I, isChecked: s() })
+      ] })
+    ] }) })
+  ] }) }), b = () => /* @__PURE__ */ t(q, { "aria-label": l.new, icon: m.Increase, onClick: y, variant: "primary" }), p = () => /* @__PURE__ */ t(
+    f,
+    {
+      fontSize: K.X2Large,
+      color: S.OnBackgroundHeader,
+      fontWeight: "bold",
+      fontFamily: J.Header,
+      children: T
+    }
+  ), w = g(
+    () => /* @__PURE__ */ t(i, { direction: "column", gap: r.Medium, mb: r.Medium, children: /* @__PURE__ */ o(i, { justifyContent: "space-between", alignItems: "center", children: [
+      p(),
+      /* @__PURE__ */ o(i, { gap: r.Medium, children: [
+        u(),
+        h(),
+        b()
+      ] })
+    ] }) }),
+    [s, e.breakingContentState, e.columnVisibility, e.data]
+  ), B = g(
+    () => /* @__PURE__ */ o(i, { direction: "column", gap: r.Medium, mb: r.Medium, children: [
+      /* @__PURE__ */ o(i, { justifyContent: "space-between", children: [
+        p(),
+        b()
+      ] }),
+      /* @__PURE__ */ o(i, { justifyContent: "space-between", gap: r.Medium, children: [
+        u(),
+        h()
+      ] })
+    ] }),
+    [s, e.breakingContentState, e.columnVisibility]
+  );
+  return /* @__PURE__ */ t(v, { id: "tableToolbar", ...M, children: x ? w : B });
+}
+const be = L(U);
+export {
+  be as TableToolbar
+};

package/dist/components/table/table.composition.d.ts

@@ -0,0 +1,18 @@
+export interface Data {
+    name: string;
+    price: number;
+    status: "active" | "inactive";
+    description?: string;
+    subRows?: Data[];
+}
+export declare const BasicTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const NestedTable: () => import("react/jsx-runtime").JSX.Element;
+export interface EditableDataType {
+    name: string;
+    age: number;
+    [key: string]: any;
+    subRows?: EditableDataType[];
+}
+export declare const EditableTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const NestedTableWithToolbar: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table.composition.d.ts.map

package/dist/components/table/table.composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.composition.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,IAAI;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;CACjB;AA8GD,eAAO,MAAM,UAAU,+CAgEtB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAuDvB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAqBD,eAAO,MAAM,aAAa,+CAgEzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAiElC,CAAC"}

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

@@ -0,0 +1,3 @@
+import { TableSubrows, TableProps } from './types.js';
+export declare function Table<I extends TableSubrows<I>>({ columns, data, localeString, expandedState, initialExpandedState, initialBreakingContentState, initialColumnVisibilityState, columnVisibilityState, onColumnVisibilityChange, onExpandedChange, onBreakingContentChange, onFilterColumn, id, customRowIndication, children, }: TableProps<I>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGxD,wBAAgB,KAAK,CAAC,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,EAChD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,oBAAyB,EACzB,2BAAgC,EAChC,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACd,EAAE,EACF,mBAAmB,EACnB,QAAQ,GACR,EAAE,UAAU,CAAC,CAAC,CAAC,2CAqBf"}

package/dist/components/table/table.js

@@ -0,0 +1,43 @@
+import { jsx as c } from "react/jsx-runtime";
+import { TableProvider as d } from "./table-context.js";
+function v({
+  columns: r,
+  data: o,
+  localeString: e,
+  expandedState: t,
+  initialExpandedState: i = {},
+  initialBreakingContentState: m = {},
+  initialColumnVisibilityState: f,
+  columnVisibilityState: n,
+  onColumnVisibilityChange: p,
+  onExpandedChange: a,
+  onBreakingContentChange: b,
+  onFilterColumn: l,
+  id: u,
+  customRowIndication: x,
+  children: T
+}) {
+  return /* @__PURE__ */ c(
+    d,
+    {
+      columns: r,
+      data: o,
+      expandedState: t,
+      initialExpandedState: i,
+      initialBreakingContentState: m,
+      localeString: e,
+      initialColumnVisibilityState: f,
+      columnVisibilityState: n,
+      onColumnVisibilityChange: p,
+      onExpandedChange: a,
+      onBreakingContentChange: b,
+      onFilterColumn: l,
+      id: u,
+      customRowIndication: x,
+      children: T
+    }
+  );
+}
+export {
+  v as Table
+};

package/dist/components/table/table.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table.spec.d.ts.map

package/dist/components/table/table.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.spec.tsx"],"names":[],"mappings":""}

package/dist/components/table/translations.d.ts

@@ -0,0 +1,94 @@
+export type Locales = "en-US" | "nb-NO" | "da-DK" | "sv-SE" | "en-GB";
+export declare const translations: {
+    "sv-SE": {
+        sortUp: string;
+        sortDown: string;
+        filter: string;
+        filterText: string;
+        hideColumn: string;
+        pinUpToColumn: string;
+        stopPinningColumn: string;
+        breakingContent: string;
+        presets: string;
+        new: string;
+        showColumns: string;
+        collapseRow: string;
+        expandRow: string;
+        rowsShowing: string;
+        settings: string;
+        more: string;
+    };
+    "en-US": {
+        sortUp: string;
+        sortDown: string;
+        filter: string;
+        filterText: string;
+        hideColumn: string;
+        pinUpToColumn: string;
+        stopPinningColumn: string;
+        breakingContent: string;
+        presets: string;
+        new: string;
+        showColumns: string;
+        collapseRow: string;
+        expandRow: string;
+        rowsShowing: string;
+        settings: string;
+        more: string;
+    };
+    "en-GB": {
+        sortUp: string;
+        sortDown: string;
+        filter: string;
+        filterText: string;
+        hideColumn: string;
+        pinUpToColumn: string;
+        stopPinningColumn: string;
+        breakingContent: string;
+        presets: string;
+        new: string;
+        showColumns: string;
+        collapseRow: string;
+        expandRow: string;
+        rowsShowing: string;
+        settings: string;
+        more: string;
+    };
+    "nb-NO": {
+        sortUp: string;
+        sortDown: string;
+        filter: string;
+        filterText: string;
+        hideColumn: string;
+        pinUpToColumn: string;
+        stopPinningColumn: string;
+        breakingContent: string;
+        presets: string;
+        new: string;
+        showColumns: string;
+        collapseRow: string;
+        expandRow: string;
+        rowsShowing: string;
+        settings: string;
+        more: string;
+    };
+    "da-DK": {
+        sortUp: string;
+        sortDown: string;
+        filter: string;
+        filterText: string;
+        hideColumn: string;
+        pinUpToColumn: string;
+        stopPinningColumn: string;
+        breakingContent: string;
+        presets: string;
+        new: string;
+        showColumns: string;
+        collapseRow: string;
+        expandRow: string;
+        rowsShowing: string;
+        settings: string;
+        more: string;
+    };
+};
+//# sourceMappingURL=translations.d.ts.map

package/dist/components/table/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/table/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAqBtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDxB,CAAC"}

package/dist/components/table/translations.js

@@ -0,0 +1,78 @@
+const n = {
+  sortUp: "Sort up",
+  sortDown: "Sort down",
+  filter: "Filtering",
+  filterText: "Filter",
+  hideColumn: "Hide column",
+  pinUpToColumn: "Pin up to column",
+  stopPinningColumn: "Stop pinning column",
+  breakingContent: "Breaking content",
+  presets: "Presets",
+  new: "New",
+  showColumns: "Show columns",
+  collapseRow: "Collapse row",
+  expandRow: "Expand row",
+  rowsShowing: "Rows displayed",
+  settings: "Settings",
+  more: "More"
+}, e = {
+  "sv-SE": {
+    sortUp: "Sortera stigande",
+    sortDown: "Sortera fallande",
+    filter: "Filtrera",
+    filterText: "Filter",
+    hideColumn: "Dölj kolumn",
+    pinUpToColumn: "Fäst upp till kolumn",
+    stopPinningColumn: "Sluta fästa kolumn",
+    breakingContent: "Radbryt innehåll",
+    presets: "Förinställningar",
+    new: "Ny",
+    showColumns: "Visa kolumner",
+    collapseRow: "Kollapsa rad",
+    expandRow: "Expandera rad",
+    rowsShowing: "Rader som visas",
+    settings: "Inställningar",
+    more: "Mer"
+  },
+  "en-US": n,
+  "en-GB": n,
+  "nb-NO": {
+    sortUp: "Sortere stigende",
+    sortDown: "Sortere synkende",
+    filter: "Filtrering",
+    filterText: "Filter",
+    hideColumn: "Skjul kolonne",
+    pinUpToColumn: "Festes til søylen",
+    stopPinningColumn: "Slutt å feste kolonnen",
+    breakingContent: "Innhold for radbrudd",
+    presets: "Forhåndsinnstillinger",
+    new: "Ny",
+    showColumns: "Vis kolonner",
+    collapseRow: "Kollapse",
+    expandRow: "Utvide rad",
+    rowsShowing: "Rader vises",
+    settings: "Innstillinger",
+    more: "Flere"
+  },
+  "da-DK": {
+    sortUp: "Sorter stigende",
+    sortDown: "Sorter faldende",
+    filter: "Filtrering",
+    filterText: "Filter",
+    hideColumn: "Skjul kolonne",
+    pinUpToColumn: "Fastgør til søjle",
+    stopPinningColumn: "Stop med at fastgøre kolonne",
+    breakingContent: "Indhold af rækkeskift",
+    presets: "Forudindstillinger",
+    new: "Ny",
+    showColumns: "Vise kolonner",
+    collapseRow: "Bryder sammen række",
+    expandRow: "Udvide række",
+    rowsShowing: "Rækker vises",
+    settings: "Indstillinger",
+    more: "Mere"
+  }
+};
+export {
+  e as translations
+};

package/dist/components/table/types.d.ts

@@ -0,0 +1,78 @@
+import { PropsWithChildren } from 'react';
+import { ColumnDef, VisibilityState, ExpandedState, RowData, RowSelectionState, CellContext, Column } from '@tanstack/react-table';
+import { Locales } from './translations.js';
+export type { ExpandedState, ColumnDef, CellContext, VisibilityState };
+export type TableSubrows<K> = {
+    subRows?: K[];
+};
+export type TableDataType<T extends TableSubrows<T>> = T & Record<string, any>;
+interface BaseTableProps<J extends TableSubrows<J>> {
+    /**
+     * The id for the table
+     */
+    id?: string;
+    /**
+     * Data that will render in the table
+     */
+    data: TableDataType<J>[];
+    /**
+     * Required locale string used to translate fixed strings used within table.
+     */
+    localeString: Locales;
+    /**
+     * The different columns that contain column header and information about the column
+     */
+    columns: ColumnDef<TableDataType<J>, any>[];
+    /**
+     * An object describing which rows that are expanded in the table.
+     * If provided, the expanded state will be "controlled" (just like making an input element controlled),
+     * meaning that you have to listen to onExpandedChange and change this state yourself if you still want
+     * the buttons for expanding/collapsing rows to work.
+     */
+    expandedState?: ExpandedState;
+    /**
+     * Called when the expanded table state changes, with the new expanded state.
+     */
+    onExpandedChange?: (state: ExpandedState) => void;
+    /**
+     * Initial expanded state of rows. Does NOT make the expanded state "controlled" if provided.
+     */
+    initialExpandedState?: ExpandedState;
+    onColumnVisibilityChange?: (state: VisibilityState) => void;
+    /**
+     * Initial state of visible columns. Use together with onColumnVisibilityChange
+     * if you want to store the column visibility state.
+     */
+    initialColumnVisibilityState?: VisibilityState;
+    /**
+     * Called when the breaking content settings changes, returns the current breaking content settings state.
+     */
+    onBreakingContentChange?: (breakingContentState: Record<string, boolean>) => void;
+    /**
+     * Called when the column filter is clicked. Returns the column that was clicked.
+     */
+    onFilterColumn?: <K extends TableSubrows<K>>(clickedColumn: Column<TableDataType<K>, unknown>) => void;
+    columnVisibilityState?: VisibilityState;
+    /**
+     * Initial state of breaking content settings. Use together with onBreakingContentChange if you want to store the state of breaking content.
+     */
+    initialBreakingContentState?: Record<string, boolean>;
+    /** Use to set your own row indication without having to click on a row */
+    customRowIndication?: RowSelectionState;
+}
+export type TableProps<J extends TableSubrows<J>> = BaseTableProps<J> & PropsWithChildren;
+/**
+ * Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.
+ * @see https://tanstack.com/table/latest/docs/guide/custom-features#step-2-use-declaration-merging-to-add-new-types-to-tanstack-table
+ */
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        isNumeric?: boolean;
+        _dummyTData?: TData;
+        _dummyTValue?: TValue;
+    }
+    interface TableMeta<TData extends RowData> {
+        tData?: TData;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EACX,SAAS,EACT,eAAe,EACf,aAAa,EACb,OAAO,EACP,iBAAiB,EACjB,WAAW,EACX,MAAM,EACN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE9C,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE/E,UAAU,cAAc,CAAC,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC;IACjD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D;;;OAGG;IACH,4BAA4B,CAAC,EAAE,eAAe,CAAC;IAC/C;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClF;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAKvG,qBAAqB,CAAC,EAAE,eAAe,CAAC;IACxC;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtD,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;CACxC;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC;AAE1F;;;GAGG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IACtC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QACjD,SAAS,CAAC,EAAE,OAAO,CAAC;QAEpB,WAAW,CAAC,EAAE,KAAK,CAAC;QAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACtB;IACD,UAAU,SAAS,CAAC,KAAK,SAAS,OAAO;QACxC,KAAK,CAAC,EAAE,KAAK,CAAC;KACd;CACD"}

package/dist/components/table/use-controllable-state.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A custom React hook for managing state that can be either controlled by a parent component or managed internally.
+ *
+ * @param value - The controlled value provided by the parent component. If `undefined`, the hook operates in uncontrolled mode and manages the state internally.
+ * @param changeHandler - Optional callback invoked when the state changes. Useful for notifying the parent component of state changes in controlled mode.
+ * @param initialValue - The initial state value when operating in uncontrolled mode.
+ *
+ * @returns A tuple containing:
+ *   - The current state value (`T`).
+ *   - A function to update the state (`setValue`).
+ *       In controlled mode, calling `setValue` invokes `changeHandler` without updating internal state.
+ *       In uncontrolled mode, `setValue` updates the internal state.
+ *
+ * @example
+ * // Uncontrolled component usage:
+ * const [value, setValue] = useControllableState(undefined, props.onChange, 'default');
+ * setValue('new value');
+ * // props.onChange('new value') is called
+ * console.log(value) // 'new value'
+ *
+ * // Controlled component usage:
+ * const [value, setValue] = useControllableState(props.value, props.onChange, 'default');
+ * setValue('new value');
+ * // props.onChange('new value') is called
+ * console.log(value) // 'default'
+ */
+export declare function useControllableState<T>(value: T extends Function ? never : T | undefined, changeHandler: ((newValue: T) => void) | undefined, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>];
+//# sourceMappingURL=use-controllable-state.d.ts.map

package/dist/components/table/use-controllable-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../../lib/components/table/use-controllable-state.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAErC,KAAK,EAAE,CAAC,SAAS,QAAQ,GAAG,KAAK,GAAG,CAAC,GAAG,SAAS,EACjD,aAAa,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,EAClD,YAAY,EAAE,CAAC,GACb,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAgB9C"}

package/dist/components/table/use-controllable-state.js

@@ -0,0 +1,12 @@
+import { useState as i } from "react";
+function p(e, t, s) {
+  const [r, u] = i(s);
+  return [e !== void 0 ? e : r, (o) => {
+    if (typeof o == "function")
+      throw new Error("Function as argument is not supported.");
+    u(o), t == null || t(o);
+  }];
+}
+export {
+  p as useControllableState
+};

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

@@ -0,0 +1,7 @@
+export { Tabs } from './tabs.js';
+export { Tab } from './tab.js';
+export { TabList } from './tab-list.js';
+export { TabPanels } from './tab-panels.js';
+export { TabPanel } from './tab-panel.js';
+export type { TabsProps, TabProps, TabListProps, TabPanelsProps, TabPanelProps } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/tabs/tab-list.d.ts

@@ -0,0 +1,9 @@
+import { TabListProps } from './types.js';
+/**
+ * TabList is used to manage a list of tab buttons.
+ * It renders a div by default, and is responsible the keyboard interaction between tabs.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/tabs
+ */
+export declare function TabList({ alignItems, children, ...props }: TabListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tab-list.d.ts.map

package/dist/components/tabs/tab-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/tab-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,UAAuB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAMpF"}

package/dist/components/tabs/tab-list.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { TabList as s } from "@chakra-ui/react";
+function f({ alignItems: t = "flex-end", children: r, ...i }) {
+  return /* @__PURE__ */ o(s, { alignItems: t, ...i, children: r });
+}
+export {
+  f as TabList
+};

package/dist/components/tabs/tab-panel.d.ts

@@ -0,0 +1,8 @@
+import { TabPanelProps } from './types.js';
+/**
+ * TabPanel Used to render the content for a specific tab.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/tabs
+ */
+export declare function TabPanel({ children, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tab-panel.d.ts.map

package/dist/components/tabs/tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/tab-panel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAE7D"}

package/dist/components/tabs/tab-panel.js

@@ -0,0 +1,8 @@
+import { jsx as n } from "react/jsx-runtime";
+import { TabPanel as o } from "@chakra-ui/react";
+function m({ children: a, ...r }) {
+  return /* @__PURE__ */ n(o, { ...r, children: a });
+}
+export {
+  m as TabPanel
+};

package/dist/components/tabs/tab-panels.d.ts

@@ -0,0 +1,9 @@
+import { TabPanelsProps } from './types.js';
+/**
+ * Used to manage the rendering of multiple tab panels. It uses cloneElement to hide/show tab panels.
+ * It renders a div by default.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/tabs
+ */
+export declare function TabPanels({ children, ...props }: TabPanelsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tab-panels.d.ts.map

package/dist/components/tabs/tab-panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panels.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/tab-panels.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAE/D"}

package/dist/components/tabs/tab-panels.js

@@ -0,0 +1,8 @@
+import { jsx as n } from "react/jsx-runtime";
+import { TabPanels as o } from "@chakra-ui/react";
+function t({ children: a, ...r }) {
+  return /* @__PURE__ */ n(o, { ...r, children: a });
+}
+export {
+  t as TabPanels
+};

package/dist/components/tabs/tab-with-image.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TabProps } from './types.js';
+/**
+ * Custom Tab component used internally within Tab.tsx when the tab has
+ * an image (true when property imgSrc is provided).
+ *
+ * For more info on custom tab components @see https://v2.chakra-ui.com/docs/components/tabs/usage#creating-custom-tab-components
+ */
+export declare const CustomTabWithImage: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=tab-with-image.d.ts.map

package/dist/components/tabs/tab-with-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-with-image.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/tab-with-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,8EAyD7B,CAAC"}

package/dist/components/tabs/tab-with-image.js

@@ -0,0 +1,53 @@
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import g from "react";
+import { useMediaQuery as f, useTab as x, useMultiStyleConfig as T, Box as n, Button as R, VisuallyHidden as S, Flex as _, AspectRatio as v, Image as W } from "@chakra-ui/react";
+import { ThemeRadiusVariable as d, ThemeSpaceVariable as w } from "../../theme/theme-types.js";
+const H = g.forwardRef((c, u) => {
+  const [t] = f("(min-width: 48em)"), e = t ? "96px" : "72px", { imgAlt: b, imgSrc: h, imgFallbackColor: r, children: o, isDisabled: i } = c, s = x({
+    ...{ isDisabled: i },
+    ref: u
+  }), l = T("Tabs", {
+    variant: "default",
+    size: t ? "md" : "sm"
+  }), p = r ? /* @__PURE__ */ a(
+    n,
+    {
+      bg: r,
+      w: e,
+      minW: e,
+      h: e,
+      minH: e,
+      borderRadius: d.Medium
+    }
+  ) : void 0;
+  return /* @__PURE__ */ m(R, { variant: "unsyled", isDisabled: i, __css: l.tabWithImage, ...s, children: [
+    /* @__PURE__ */ a(S, { children: o }),
+    /* @__PURE__ */ m(_, { direction: "column", align: "center", role: "group", children: [
+      /* @__PURE__ */ a(v, { ratio: 1, maxWidth: e, minWidth: e, mb: w.XSmall, children: /* @__PURE__ */ a(
+        W,
+        {
+          src: h,
+          alt: b,
+          h: e,
+          w: e,
+          userSelect: "none",
+          borderRadius: d.Medium,
+          fallback: p
+        }
+      ) }),
+      /* @__PURE__ */ a(
+        n,
+        {
+          outline: "none",
+          __css: l.tab,
+          "data-selected": s["aria-selected"] ? !0 : void 0,
+          "data-disabled": i ? !0 : void 0,
+          children: o
+        }
+      )
+    ] })
+  ] });
+});
+export {
+  H as CustomTabWithImage
+};