@pautena/react-design-system 0.20.2 → 1.0.0

package/dist/Select/Select.d.ts

@@ -0,0 +1,147 @@
+import { BoxProps } from '@mui/material/Box';
+import { CircularProgressProps } from '@mui/material/CircularProgress';
+import { FormControlProps } from '@mui/material/FormControl';
+import { InputLabelProps } from '@mui/material/InputLabel';
+import { LinearProgressProps } from '@mui/material/LinearProgress';
+import { SelectProps as MuiSelectProps } from '@mui/material/Select';
+import { JSXElementConstructor, ReactNode } from 'react';
+/**
+ * Select input size variants
+ */
+export type SelectSize = "small" | "medium";
+/**
+ * Interface representing the slots for the Select component.
+ */
+export interface SelectSlots {
+    /**
+     * Root form control component
+     */
+    formControl?: JSXElementConstructor<FormControlProps>;
+    /**
+     * Input label component
+     */
+    inputLabel?: JSXElementConstructor<InputLabelProps>;
+    /**
+     * Select component
+     */
+    select?: JSXElementConstructor<MuiSelectProps<any>>;
+    /**
+     * Render value container component
+     */
+    renderValueContainer?: JSXElementConstructor<BoxProps>;
+    /**
+     * Loading indicator component (when fetching)
+     */
+    loadingIndicator?: JSXElementConstructor<CircularProgressProps>;
+    /**
+     * Fetching indicator component (when loading)
+     */
+    fetchingIndicator?: JSXElementConstructor<LinearProgressProps>;
+}
+/**
+ * Interface representing the slot properties for the Select component.
+ */
+export interface SelectSlotProps {
+    /**
+     * Props for the form control
+     */
+    formControl?: Partial<FormControlProps>;
+    /**
+     * Props for the input label
+     */
+    inputLabel?: Partial<InputLabelProps>;
+    /**
+     * Props for the select (onChange is managed by the component)
+     */
+    select?: Partial<Omit<MuiSelectProps<any>, "onChange">>;
+    /**
+     * Props for the render value container
+     */
+    renderValueContainer?: Partial<BoxProps>;
+    /**
+     * Props for the loading indicator
+     */
+    loadingIndicator?: Partial<CircularProgressProps>;
+    /**
+     * Props for the fetching indicator
+     */
+    fetchingIndicator?: Partial<LinearProgressProps>;
+}
+/**
+ * Props for the Select component
+ *
+ * @template T - The type of the selected value
+ */
+export interface SelectProps<T> {
+    /**
+     * The label for the select input.
+     */
+    label: string;
+    /**
+     * The selected value.
+     */
+    value: T;
+    /**
+     * If true, the select input is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * If true, the select input is in a fetching state.
+     */
+    fetching?: boolean;
+    /**
+     * The size of the select input.
+     */
+    size?: SelectSize;
+    /**
+     * The color of the select input.
+     */
+    color?: string;
+    /**
+     * If true, the select input takes up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The child elements to be rendered within the select input.
+     */
+    children?: ReactNode;
+    /**
+     * The callback function to handle changes to the select input.
+     */
+    onChange?: MuiSelectProps<T>["onChange"];
+    /**
+     * Optional slots for custom rendering within the select
+     */
+    slots?: SelectSlots;
+    /**
+     * Optional props for the slots
+     */
+    slotProps?: SelectSlotProps;
+}
+/**
+ * A custom Select component that extends the functionality of the Material-UI Select component.
+ * This component supports additional features such as loading and fetching states, custom colors, and full-width display.
+ *
+ * Supports extensive customization through slots and slotProps.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select label="Country" value={country} onChange={handleChange}>
+ *   <MenuItem value="us">United States</MenuItem>
+ *   <MenuItem value="uk">United Kingdom</MenuItem>
+ * </Select>
+ *
+ * // With custom loading indicator
+ * <Select
+ *   label="Status"
+ *   value={status}
+ *   loading
+ *   slotProps={{
+ *     loadingIndicator: { size: 24 }
+ *   }}
+ * />
+ * ```
+ */
+export declare function Select<T extends ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, slots, slotProps, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/Select/Select.mjs

@@ -0,0 +1,103 @@
+import { j as n } from "../_virtual/jsx-runtime.mjs";
+import { useId as L } from "react";
+import d from "../node_modules/@mui/material/esm/FormControl/FormControl.mjs";
+import S from "../node_modules/@mui/material/esm/InputLabel/InputLabel.mjs";
+import y from "../node_modules/@mui/material/esm/Select/Select.mjs";
+import V from "../node_modules/@mui/material/esm/Box/Box.mjs";
+import F from "../node_modules/@mui/material/esm/CircularProgress/CircularProgress.mjs";
+import M from "../node_modules/@mui/material/esm/LinearProgress/LinearProgress.mjs";
+import B from "../node_modules/@mui/material/esm/styles/styled.mjs";
+const D = {
+  small: 15,
+  medium: 20
+};
+function G({
+  label: o,
+  value: u,
+  loading: f = !1,
+  fetching: l = !1,
+  size: a = "medium",
+  fullWidth: s = !1,
+  color: r,
+  children: p,
+  onChange: x,
+  slots: t,
+  slotProps: e
+}) {
+  const i = L();
+  t?.formControl ?? d;
+  const C = t?.inputLabel ?? S, h = t?.select ?? y, m = t?.renderValueContainer ?? V, I = t?.loadingIndicator ?? F, g = t?.fetchingIndicator ?? M, j = (c) => l ? /* @__PURE__ */ n.jsx(
+    m,
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      width: 1,
+      height: 1,
+      ...e?.renderValueContainer,
+      children: /* @__PURE__ */ n.jsx(
+        I,
+        {
+          color: "inherit",
+          size: D[a],
+          ...e?.loadingIndicator
+        }
+      )
+    }
+  ) : f ? /* @__PURE__ */ n.jsxs(
+    m,
+    {
+      display: "flex",
+      flexDirection: "column",
+      ...e?.renderValueContainer,
+      children: [
+        c,
+        /* @__PURE__ */ n.jsx(
+          g,
+          {
+            color: "inherit",
+            sx: { position: "absolute", left: 0, right: 0, bottom: 0 },
+            ...e?.fetchingIndicator
+          }
+        )
+      ]
+    }
+  ) : c, b = B(d)(() => r ? {
+    label: {
+      color: r
+    },
+    ".MuiOutlinedInput-notchedOutline": {
+      borderColor: `${r} !important`
+    },
+    ".MuiInputBase-root": {
+      color: r
+    },
+    ".MuiSelect-icon": {
+      fill: r
+    }
+  } : {});
+  return /* @__PURE__ */ n.jsxs(b, { fullWidth: s, ...e?.formControl, children: [
+    /* @__PURE__ */ n.jsx(C, { id: i, ...e?.inputLabel, children: o }),
+    /* @__PURE__ */ n.jsx(
+      h,
+      {
+        ...e?.select,
+        labelId: i,
+        id: i,
+        value: u,
+        label: o,
+        onChange: x,
+        disabled: l,
+        size: a,
+        renderValue: j,
+        children: p
+      }
+    )
+  ] });
+}
+export {
+  G as Select,
+  G as default
+};
+//# sourceMappingURL=Select.mjs.map

package/dist/Select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","sources":["../../src/Select/Select.tsx"],"sourcesContent":["import Box, { type BoxProps } from \"@mui/material/Box\";\nimport CircularProgress, {\n  type CircularProgressProps,\n} from \"@mui/material/CircularProgress\";\nimport FormControl, { type FormControlProps } from \"@mui/material/FormControl\";\nimport InputLabel, { type InputLabelProps } from \"@mui/material/InputLabel\";\nimport LinearProgress, {\n  type LinearProgressProps,\n} from \"@mui/material/LinearProgress\";\nimport MuiSelect, {\n  type SelectProps as MuiSelectProps,\n} from \"@mui/material/Select\";\nimport { styled } from \"@mui/material/styles\";\nimport { type JSXElementConstructor, type ReactNode, useId } from \"react\";\n\n/**\n * Select input size variants\n */\nexport type SelectSize = \"small\" | \"medium\";\n\n/**\n * Interface representing the slots for the Select component.\n */\nexport interface SelectSlots {\n  /**\n   * Root form control component\n   */\n  formControl?: JSXElementConstructor<FormControlProps>;\n  /**\n   * Input label component\n   */\n  inputLabel?: JSXElementConstructor<InputLabelProps>;\n  /**\n   * Select component\n   */\n  select?: JSXElementConstructor<MuiSelectProps<any>>;\n  /**\n   * Render value container component\n   */\n  renderValueContainer?: JSXElementConstructor<BoxProps>;\n  /**\n   * Loading indicator component (when fetching)\n   */\n  loadingIndicator?: JSXElementConstructor<CircularProgressProps>;\n  /**\n   * Fetching indicator component (when loading)\n   */\n  fetchingIndicator?: JSXElementConstructor<LinearProgressProps>;\n}\n\n/**\n * Interface representing the slot properties for the Select component.\n */\nexport interface SelectSlotProps {\n  /**\n   * Props for the form control\n   */\n  formControl?: Partial<FormControlProps>;\n  /**\n   * Props for the input label\n   */\n  inputLabel?: Partial<InputLabelProps>;\n  /**\n   * Props for the select (onChange is managed by the component)\n   */\n  select?: Partial<Omit<MuiSelectProps<any>, \"onChange\">>;\n  /**\n   * Props for the render value container\n   */\n  renderValueContainer?: Partial<BoxProps>;\n  /**\n   * Props for the loading indicator\n   */\n  loadingIndicator?: Partial<CircularProgressProps>;\n  /**\n   * Props for the fetching indicator\n   */\n  fetchingIndicator?: Partial<LinearProgressProps>;\n}\n\n/**\n * Props for the Select component\n *\n * @template T - The type of the selected value\n */\nexport interface SelectProps<T> {\n  /**\n   * The label for the select input.\n   */\n  label: string;\n  /**\n   * The selected value.\n   */\n  value: T;\n  /**\n   * If true, the select input is in a loading state.\n   */\n  loading?: boolean;\n  /**\n   * If true, the select input is in a fetching state.\n   */\n  fetching?: boolean;\n  /**\n   * The size of the select input.\n   */\n  size?: SelectSize;\n  /**\n   * The color of the select input.\n   */\n  color?: string;\n  /**\n   * If true, the select input takes up the full width of its container.\n   */\n  fullWidth?: boolean;\n  /**\n   * The child elements to be rendered within the select input.\n   */\n  children?: ReactNode;\n  /**\n   * The callback function to handle changes to the select input.\n   */\n  onChange?: MuiSelectProps<T>[\"onChange\"];\n  /**\n   * Optional slots for custom rendering within the select\n   */\n  slots?: SelectSlots;\n  /**\n   * Optional props for the slots\n   */\n  slotProps?: SelectSlotProps;\n}\n\nconst ProgressSize: Record<SelectSize, number> = {\n  small: 15,\n  medium: 20,\n};\n\n/**\n * A custom Select component that extends the functionality of the Material-UI Select component.\n * This component supports additional features such as loading and fetching states, custom colors, and full-width display.\n *\n * Supports extensive customization through slots and slotProps.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Select label=\"Country\" value={country} onChange={handleChange}>\n *   <MenuItem value=\"us\">United States</MenuItem>\n *   <MenuItem value=\"uk\">United Kingdom</MenuItem>\n * </Select>\n *\n * // With custom loading indicator\n * <Select\n *   label=\"Status\"\n *   value={status}\n *   loading\n *   slotProps={{\n *     loadingIndicator: { size: 24 }\n *   }}\n * />\n * ```\n */\nexport function Select<T extends ReactNode>({\n  label,\n  value,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  color,\n  children,\n  onChange,\n  slots,\n  slotProps,\n}: SelectProps<T>) {\n  const id = useId();\n\n  // Slot components with defaults\n  const _FormControlComponent = slots?.formControl ?? FormControl;\n  const InputLabelComponent = slots?.inputLabel ?? InputLabel;\n  const SelectComponent = slots?.select ?? MuiSelect;\n  const RenderValueContainerComponent = slots?.renderValueContainer ?? Box;\n  const LoadingIndicatorComponent = slots?.loadingIndicator ?? CircularProgress;\n  const FetchingIndicatorComponent = slots?.fetchingIndicator ?? LinearProgress;\n\n  const renderValue = (value: T): ReactNode => {\n    if (fetching) {\n      return (\n        <RenderValueContainerComponent\n          display=\"flex\"\n          flexDirection=\"column\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          width={1}\n          height={1}\n          {...slotProps?.renderValueContainer}\n        >\n          <LoadingIndicatorComponent\n            color=\"inherit\"\n            size={ProgressSize[size]}\n            {...slotProps?.loadingIndicator}\n          />\n        </RenderValueContainerComponent>\n      );\n    }\n\n    if (loading) {\n      return (\n        <RenderValueContainerComponent\n          display=\"flex\"\n          flexDirection=\"column\"\n          {...slotProps?.renderValueContainer}\n        >\n          {value}\n          <FetchingIndicatorComponent\n            color=\"inherit\"\n            sx={{ position: \"absolute\", left: 0, right: 0, bottom: 0 }}\n            {...slotProps?.fetchingIndicator}\n          />\n        </RenderValueContainerComponent>\n      );\n    }\n\n    return value;\n  };\n\n  const StyledFormControl = styled(FormControl)(() => {\n    if (!color) {\n      return {};\n    }\n\n    return {\n      label: {\n        color,\n      },\n      \".MuiOutlinedInput-notchedOutline\": {\n        borderColor: `${color} !important`,\n      },\n      \".MuiInputBase-root\": {\n        color,\n      },\n      \".MuiSelect-icon\": {\n        fill: color,\n      },\n    };\n  });\n\n  return (\n    <StyledFormControl fullWidth={fullWidth} {...slotProps?.formControl}>\n      <InputLabelComponent id={id} {...slotProps?.inputLabel}>\n        {label}\n      </InputLabelComponent>\n      <SelectComponent\n        {...slotProps?.select}\n        labelId={id}\n        id={id}\n        value={value}\n        label={label}\n        onChange={onChange as any}\n        disabled={fetching}\n        size={size}\n        renderValue={renderValue}\n      >\n        {children}\n      </SelectComponent>\n    </StyledFormControl>\n  );\n}\n\nexport default Select;\n"],"names":["ProgressSize","Select","label","value","loading","fetching","size","fullWidth","color","children","onChange","slots","slotProps","id","useId","FormControl","InputLabelComponent","InputLabel","SelectComponent","MuiSelect","RenderValueContainerComponent","Box","LoadingIndicatorComponent","CircularProgress","FetchingIndicatorComponent","LinearProgress","renderValue","jsx","jsxs","StyledFormControl","styled"],"mappings":";;;;;;;;;AAoIA,MAAMA,IAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,QAAQ;AACV;AA2BO,SAASC,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAMC,IAAKC,EAAA;AAGmB,EAAAH,GAAO,eAAeI;AACpD,QAAMC,IAAsBL,GAAO,cAAcM,GAC3CC,IAAkBP,GAAO,UAAUQ,GACnCC,IAAgCT,GAAO,wBAAwBU,GAC/DC,IAA4BX,GAAO,oBAAoBY,GACvDC,IAA6Bb,GAAO,qBAAqBc,GAEzDC,IAAc,CAACvB,MACfE,IAEAsB,gBAAAA,EAAAA;AAAAA,IAACP;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACP,GAAGR,GAAW;AAAA,MAEf,UAAAe,gBAAAA,EAAAA;AAAAA,QAACL;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAMtB,EAAaM,CAAI;AAAA,UACtB,GAAGM,GAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA,IAKFR,IAEAwB,gBAAAA,EAAAA;AAAAA,IAACR;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAc;AAAA,MACb,GAAGR,GAAW;AAAA,MAEd,UAAA;AAAA,QAAAT;AAAAA,QACDwB,gBAAAA,EAAAA;AAAAA,UAACH;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,IAAI,EAAE,UAAU,YAAY,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAA;AAAA,YACtD,GAAGZ,GAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA,IAKCT,GAGH0B,IAAoBC,EAAOf,CAAW,EAAE,MACvCP,IAIE;AAAA,IACL,OAAO;AAAA,MACL,OAAAA;AAAA,IAAA;AAAA,IAEF,oCAAoC;AAAA,MAClC,aAAa,GAAGA,CAAK;AAAA,IAAA;AAAA,IAEvB,sBAAsB;AAAA,MACpB,OAAAA;AAAA,IAAA;AAAA,IAEF,mBAAmB;AAAA,MACjB,MAAMA;AAAA,IAAA;AAAA,EACR,IAfO,CAAA,CAiBV;AAED,SACEoB,gBAAAA,EAAAA,KAACC,GAAA,EAAkB,WAAAtB,GAAuB,GAAGK,GAAW,aACtD,UAAA;AAAA,IAAAe,gBAAAA,MAACX,GAAA,EAAoB,IAAAH,GAAS,GAAGD,GAAW,YACzC,UAAAV,GACH;AAAA,IACAyB,gBAAAA,EAAAA;AAAAA,MAACT;AAAA,MAAA;AAAA,QACE,GAAGN,GAAW;AAAA,QACf,SAASC;AAAA,QACT,IAAAA;AAAA,QACA,OAAAV;AAAA,QACA,OAAAD;AAAA,QACA,UAAAQ;AAAA,QACA,UAAUL;AAAA,QACV,MAAAC;AAAA,QACA,aAAAoB;AAAA,QAEC,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/Select/index.d.ts

@@ -0,0 +1,2 @@
+export type { SelectProps, SelectSize } from './Select';
+export { default, default as Select } from './Select';

package/dist/SkeletonCard/SkeletonCard.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for the SkeletonCard component.
+ */
+export interface SkeletonCardProps {
+    /**
+     * The width of the skeleton card. Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px").
+     */
+    width?: number | string;
+    /**
+     * The animation style for the skeleton card. Can be "pulse", "wave", or false to disable animation.
+     */
+    animation?: "pulse" | "wave" | false;
+}
+/**
+ * SkeletonCard component renders a skeleton loading placeholder for a card.
+ */
+export declare function SkeletonCard({ width, animation, }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+export default SkeletonCard;

package/dist/SkeletonCard/SkeletonCard.mjs

@@ -0,0 +1,34 @@
+import { j as r } from "../_virtual/jsx-runtime.mjs";
+import s from "../node_modules/@mui/material/esm/Box/Box.mjs";
+import e from "../node_modules/@mui/material/esm/Skeleton/Skeleton.mjs";
+function x({
+  width: a = "100%",
+  animation: t = !1
+}) {
+  return /* @__PURE__ */ r.jsxs(s, { width: a, children: [
+    /* @__PURE__ */ r.jsx(e, { animation: t, variant: "rectangular", height: 118 }),
+    /* @__PURE__ */ r.jsx(
+      e,
+      {
+        animation: t,
+        variant: "rectangular",
+        height: 16,
+        sx: { my: 1 }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      e,
+      {
+        animation: t,
+        variant: "rectangular",
+        width: "80%",
+        height: 16
+      }
+    )
+  ] });
+}
+export {
+  x as SkeletonCard,
+  x as default
+};
+//# sourceMappingURL=SkeletonCard.mjs.map

package/dist/SkeletonCard/SkeletonCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonCard.mjs","sources":["../../src/SkeletonCard/SkeletonCard.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Skeleton from \"@mui/material/Skeleton\";\n\n/**\n * Props for the SkeletonCard component.\n */\nexport interface SkeletonCardProps {\n  /**\n   * The width of the skeleton card. Can be a number (interpreted as pixels) or a string (e.g., \"100%\", \"50px\").\n   */\n  width?: number | string;\n\n  /**\n   * The animation style for the skeleton card. Can be \"pulse\", \"wave\", or false to disable animation.\n   */\n  animation?: \"pulse\" | \"wave\" | false;\n}\n\n/**\n * SkeletonCard component renders a skeleton loading placeholder for a card.\n */\nexport function SkeletonCard({\n  width = \"100%\",\n  animation = false,\n}: SkeletonCardProps) {\n  return (\n    <Box width={width}>\n      <Skeleton animation={animation} variant=\"rectangular\" height={118} />\n      <Skeleton\n        animation={animation}\n        variant=\"rectangular\"\n        height={16}\n        sx={{ my: 1 }}\n      />\n      <Skeleton\n        animation={animation}\n        variant=\"rectangular\"\n        width=\"80%\"\n        height={16}\n      />\n    </Box>\n  );\n}\n\nexport default SkeletonCard;\n"],"names":["SkeletonCard","width","animation","jsxs","Box","jsx","Skeleton"],"mappings":";;;AAqBO,SAASA,EAAa;AAAA,EAC3B,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AACd,GAAsB;AACpB,SACEC,gBAAAA,OAACC,KAAI,OAAAH,GACH,UAAA;AAAA,IAAAI,gBAAAA,EAAAA,IAACC,GAAA,EAAS,WAAAJ,GAAsB,SAAQ,eAAc,QAAQ,KAAK;AAAA,IACnEG,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAJ;AAAA,QACA,SAAQ;AAAA,QACR,QAAQ;AAAA,QACR,IAAI,EAAE,IAAI,EAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAEdG,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAJ;AAAA,QACA,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GACF;AAEJ;"}

package/dist/SkeletonCard/index.d.ts

@@ -0,0 +1,2 @@
+export type { SkeletonCardProps } from './SkeletonCard';
+export { default, default as SkeletonCard } from './SkeletonCard';

package/dist/SkeletonGrid/SkeletonGrid.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Props for the SkeletonGrid component.
+ */
+export interface SkeletonGridProps {
+    /**
+     * Optional size of the skeleton grid.
+     */
+    size?: number;
+}
+export interface SkeletonGridProps {
+    size?: number;
+}
+/**
+ * SkeletonGrid component renders a grid of skeleton cards.
+ */
+export declare function SkeletonGrid({ size }: SkeletonGridProps): import("react/jsx-runtime").JSX.Element;
+export default SkeletonGrid;

package/dist/SkeletonGrid/SkeletonGrid.mjs

@@ -0,0 +1,13 @@
+import { j as r } from "../_virtual/jsx-runtime.mjs";
+import { SkeletonCard as o } from "../SkeletonCard/SkeletonCard.mjs";
+import { newArrayWithSize as n } from "../utils/arrays.mjs";
+import "@mui/material";
+import i from "../node_modules/@mui/material/esm/Grid/Grid.mjs";
+function f({ size: t = 20 }) {
+  return /* @__PURE__ */ r.jsx(i, { container: !0, spacing: 2, children: n(t, 0).map((m, e) => /* @__PURE__ */ r.jsx(i, { size: { xs: 4 }, children: /* @__PURE__ */ r.jsx(o, { width: 1 }) }, e)) });
+}
+export {
+  f as SkeletonGrid,
+  f as default
+};
+//# sourceMappingURL=SkeletonGrid.mjs.map

package/dist/SkeletonGrid/SkeletonGrid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonGrid.mjs","sources":["../../src/SkeletonGrid/SkeletonGrid.tsx"],"sourcesContent":["import Grid from \"@mui/material/Grid\";\nimport SkeletonCard from \"../SkeletonCard\";\nimport { newArrayWithSize } from \"../utils\";\n\n/**\n * Props for the SkeletonGrid component.\n */\nexport interface SkeletonGridProps {\n  /**\n   * Optional size of the skeleton grid.\n   */\n  size?: number;\n}\nexport interface SkeletonGridProps {\n  size?: number;\n}\n\n/**\n * SkeletonGrid component renders a grid of skeleton cards.\n */\nexport function SkeletonGrid({ size = 20 }: SkeletonGridProps) {\n  return (\n    <Grid container spacing={2}>\n      {newArrayWithSize(size, 0).map((_, i) => (\n        <Grid key={i} size={{ xs: 4 }}>\n          <SkeletonCard width={1} />\n        </Grid>\n      ))}\n    </Grid>\n  );\n}\n\nexport default SkeletonGrid;\n"],"names":["SkeletonGrid","size","jsx","Grid","newArrayWithSize","_","i","SkeletonCard"],"mappings":";;;;;AAoBO,SAASA,EAAa,EAAE,MAAAC,IAAO,MAAyB;AAC7D,SACEC,gBAAAA,EAAAA,IAACC,GAAA,EAAK,WAAS,IAAC,SAAS,GACtB,UAAAC,EAAiBH,GAAM,CAAC,EAAE,IAAI,CAACI,GAAGC,MACjCJ,gBAAAA,EAAAA,IAACC,GAAA,EAAa,MAAM,EAAE,IAAI,EAAA,GACxB,UAAAD,gBAAAA,EAAAA,IAACK,GAAA,EAAa,OAAO,EAAA,CAAG,EAAA,GADfD,CAEX,CACD,GACH;AAEJ;"}

package/dist/SkeletonGrid/index.d.ts

@@ -0,0 +1,2 @@
+export type { SkeletonGridProps } from './SkeletonGrid';
+export { default, default as SkeletonGrid } from './SkeletonGrid';

package/dist/TabCard/TabCard.context.mjs

@@ -0,0 +1,7 @@
+import { createContext as t } from "react";
+const o = t([0, () => null]), e = o.Provider;
+export {
+  o as TabCardContext,
+  e as TabCardContextProvider
+};
+//# sourceMappingURL=TabCard.context.mjs.map

package/dist/TabCard/TabCard.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabCard.context.mjs","sources":["../../src/TabCard/TabCard.context.tsx"],"sourcesContent":["import { createContext, type Dispatch, type SetStateAction } from \"react\";\n\nexport const TabCardContext = createContext<\n  [number, Dispatch<SetStateAction<number>>]\n>([0, () => null]);\nexport const TabCardContextProvider = TabCardContext.Provider;\n"],"names":["TabCardContext","createContext","TabCardContextProvider"],"mappings":";AAEO,MAAMA,IAAiBC,EAE5B,CAAC,GAAG,MAAM,IAAI,CAAC,GACJC,IAAyBF,EAAe;"}

package/dist/TabCard/TabCard.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement } from 'react';
+/**
+ * Tab configuration data
+ */
+export interface TabData {
+    /**
+     * Tab label text
+     */
+    text: string;
+    /**
+     * Optional icon element
+     */
+    icon?: ReactElement;
+}
+/**
+ * Props for the TabCard component
+ */
+export interface TabCardProps {
+    /**
+     * Array of tab configurations
+     */
+    tabs: TabData[];
+    /**
+     * Index of the initially selected tab
+     * @default 0
+     */
+    initialTab?: number;
+    /**
+     * Callback when tab selection changes
+     * @param tab - The selected tab data
+     * @param index - Index of the selected tab
+     */
+    onChangeTab?: (tab: TabData, index: number) => void;
+    /**
+     * Content to display in the tab panels
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Card component with tabbed navigation
+ */
+export declare function TabCard({ children, tabs, initialTab, onChangeTab, }: TabCardProps): import("react/jsx-runtime").JSX.Element;
+export default TabCard;

package/dist/TabCard/TabCard.dummy.d.ts

@@ -0,0 +1,14 @@
+import { TabData } from './TabCard';
+export declare const DummyTabs: ({
+    text: string;
+    icon?: undefined;
+} | {
+    text: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+})[];
+export interface TabCardDummyProps {
+    tabs: TabData[];
+    initialTab: number;
+    onChangeTab: (tab: TabData, index: number) => void;
+}
+export declare function TabCardDummy({ tabs, initialTab, onChangeTab, }: TabCardDummyProps): import("react/jsx-runtime").JSX.Element;

package/dist/TabCard/TabCard.mjs

@@ -0,0 +1,68 @@
+import { j as t } from "../_virtual/jsx-runtime.mjs";
+import { useState as m } from "react";
+import { useGetDefaultThemeColor as g } from "../utils/theme.mjs";
+import { TabCardContextProvider as u } from "./TabCard.context.mjs";
+import s from "../node_modules/@mui/material/esm/styles/styled.mjs";
+import f from "../node_modules/@mui/material/esm/Tabs/Tabs.mjs";
+import b from "../node_modules/@mui/material/esm/Tab/Tab.mjs";
+import T from "../node_modules/@mui/material/esm/Paper/Paper.mjs";
+import h from "../node_modules/@mui/material/esm/Box/Box.mjs";
+const x = s((o) => /* @__PURE__ */ t.jsx(
+  f,
+  {
+    ...o,
+    TabIndicatorProps: { children: /* @__PURE__ */ t.jsx("span", { className: "MuiTabs-indicatorSpan" }) }
+  }
+))(({ theme: o }) => ({
+  minHeight: o.spacing(5),
+  "& .MuiTabs-indicator": {
+    display: "flex",
+    justifyContent: "center",
+    backgroundColor: "transparent"
+  },
+  "& .MuiTabs-indicatorSpan": {
+    maxWidth: 40,
+    width: "100%",
+    backgroundColor: o.palette.primary.main
+  }
+})), y = s(b)(({ theme: o }) => ({
+  textTransform: "none",
+  fontWeight: o.typography.fontWeightRegular,
+  marginRight: o.spacing(1),
+  color: o.palette.text.secondary,
+  paddingTop: 0,
+  paddingBottom: 0,
+  minHeight: o.spacing(5),
+  "&.Mui-selected": {
+    color: o.palette.text.secondary,
+    fontWeight: o.typography.fontWeightBold
+  }
+}));
+function k({
+  children: o,
+  tabs: i,
+  initialTab: l = 0,
+  onChangeTab: p = () => null
+}) {
+  const d = g(), [n, e] = m(l), c = (r, a) => {
+    e(a), p(i[a], a);
+  };
+  return /* @__PURE__ */ t.jsx(u, { value: [n, e], children: /* @__PURE__ */ t.jsxs(T, { variant: "outlined", children: [
+    /* @__PURE__ */ t.jsx(h, { bgcolor: d, children: /* @__PURE__ */ t.jsx(x, { value: n, onChange: c, children: i.map(({ text: r, icon: a }) => /* @__PURE__ */ t.jsx(
+      y,
+      {
+        iconPosition: "start",
+        disableRipple: !0,
+        label: r,
+        icon: a
+      },
+      r
+    )) }) }),
+    o
+  ] }) });
+}
+export {
+  k as TabCard,
+  k as default
+};
+//# sourceMappingURL=TabCard.mjs.map

package/dist/TabCard/TabCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabCard.mjs","sources":["../../src/TabCard/TabCard.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Paper from \"@mui/material/Paper\";\nimport { styled } from \"@mui/material/styles\";\nimport Tab from \"@mui/material/Tab\";\nimport Tabs from \"@mui/material/Tabs\";\nimport { type ReactElement, type SyntheticEvent, useState } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { TabCardContextProvider } from \"./TabCard.context\";\n\n/**\n * Tab configuration data\n */\nexport interface TabData {\n  /**\n   * Tab label text\n   */\n  text: string;\n  /**\n   * Optional icon element\n   */\n  icon?: ReactElement;\n}\n\ninterface StyledTabsProps {\n  children?: React.ReactNode;\n  value: number;\n  onChange: (event: React.SyntheticEvent, newValue: number) => void;\n}\n\nconst StyledTabs = styled((props: StyledTabsProps) => (\n  <Tabs\n    {...props}\n    TabIndicatorProps={{ children: <span className=\"MuiTabs-indicatorSpan\" /> }}\n  />\n))(({ theme }) => ({\n  minHeight: theme.spacing(5),\n  \"& .MuiTabs-indicator\": {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n  },\n  \"& .MuiTabs-indicatorSpan\": {\n    maxWidth: 40,\n    width: \"100%\",\n    backgroundColor: theme.palette.primary.main,\n  },\n}));\n\nconst StyledTab = styled(Tab)(({ theme }) => ({\n  textTransform: \"none\",\n  fontWeight: theme.typography.fontWeightRegular,\n  marginRight: theme.spacing(1),\n  color: theme.palette.text.secondary,\n  paddingTop: 0,\n  paddingBottom: 0,\n  minHeight: theme.spacing(5),\n  \"&.Mui-selected\": {\n    color: theme.palette.text.secondary,\n    fontWeight: theme.typography.fontWeightBold,\n  },\n}));\n\n/**\n * Props for the TabCard component\n */\nexport interface TabCardProps {\n  /**\n   * Array of tab configurations\n   */\n  tabs: TabData[];\n  /**\n   * Index of the initially selected tab\n   * @default 0\n   */\n  initialTab?: number;\n  /**\n   * Callback when tab selection changes\n   * @param tab - The selected tab data\n   * @param index - Index of the selected tab\n   */\n  onChangeTab?: (tab: TabData, index: number) => void;\n  /**\n   * Content to display in the tab panels\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Card component with tabbed navigation\n */\nexport function TabCard({\n  children,\n  tabs,\n  initialTab = 0,\n  onChangeTab = () => null,\n}: TabCardProps) {\n  const bgColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useState(initialTab);\n\n  const handleChangeTab = (\n    _: SyntheticEvent<Element, Event>,\n    index: number,\n  ) => {\n    setSelectedTab(index);\n    onChangeTab(tabs[index], index);\n  };\n\n  return (\n    <TabCardContextProvider value={[selectedTab, setSelectedTab]}>\n      <Paper variant=\"outlined\">\n        <Box bgcolor={bgColor}>\n          <StyledTabs value={selectedTab} onChange={handleChangeTab}>\n            {tabs.map(({ text, icon }) => (\n              <StyledTab\n                iconPosition=\"start\"\n                disableRipple\n                key={text}\n                label={text}\n                icon={icon}\n              />\n            ))}\n          </StyledTabs>\n        </Box>\n        {children}\n      </Paper>\n    </TabCardContextProvider>\n  );\n}\n\nexport default TabCard;\n"],"names":["StyledTabs","styled","props","jsx","Tabs","theme","StyledTab","Tab","TabCard","children","tabs","initialTab","onChangeTab","bgColor","useGetDefaultThemeColor","selectedTab","setSelectedTab","useState","handleChangeTab","_","index","TabCardContextProvider","jsxs","Paper","Box","text","icon"],"mappings":";;;;;;;;;AA6BA,MAAMA,IAAaC,EAAO,CAACC,MACzBC,gBAAAA,EAAAA;AAAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,mBAAmB,EAAE,gCAAW,QAAA,EAAK,WAAU,yBAAwB,EAAA;AAAA,EAAG;AAC5E,CACD,EAAE,CAAC,EAAE,OAAAG,SAAa;AAAA,EACjB,WAAWA,EAAM,QAAQ,CAAC;AAAA,EAC1B,wBAAwB;AAAA,IACtB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EAAA;AAAA,EAEnB,4BAA4B;AAAA,IAC1B,UAAU;AAAA,IACV,OAAO;AAAA,IACP,iBAAiBA,EAAM,QAAQ,QAAQ;AAAA,EAAA;AAE3C,EAAE,GAEIC,IAAYL,EAAOM,CAAG,EAAE,CAAC,EAAE,OAAAF,SAAa;AAAA,EAC5C,eAAe;AAAA,EACf,YAAYA,EAAM,WAAW;AAAA,EAC7B,aAAaA,EAAM,QAAQ,CAAC;AAAA,EAC5B,OAAOA,EAAM,QAAQ,KAAK;AAAA,EAC1B,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,WAAWA,EAAM,QAAQ,CAAC;AAAA,EAC1B,kBAAkB;AAAA,IAChB,OAAOA,EAAM,QAAQ,KAAK;AAAA,IAC1B,YAAYA,EAAM,WAAW;AAAA,EAAA;AAEjC,EAAE;AA8BK,SAASG,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc,MAAM;AACtB,GAAiB;AACf,QAAMC,IAAUC,EAAA,GACV,CAACC,GAAaC,CAAc,IAAIC,EAASN,CAAU,GAEnDO,IAAkB,CACtBC,GACAC,MACG;AACH,IAAAJ,EAAeI,CAAK,GACpBR,EAAYF,EAAKU,CAAK,GAAGA,CAAK;AAAA,EAChC;AAEA,SACEjB,gBAAAA,EAAAA,IAACkB,GAAA,EAAuB,OAAO,CAACN,GAAaC,CAAc,GACzD,UAAAM,gBAAAA,EAAAA,KAACC,GAAA,EAAM,SAAQ,YACb,UAAA;AAAA,IAAApB,gBAAAA,MAACqB,GAAA,EAAI,SAASX,GACZ,UAAAV,gBAAAA,EAAAA,IAACH,KAAW,OAAOe,GAAa,UAAUG,GACvC,YAAK,IAAI,CAAC,EAAE,MAAAO,GAAM,MAAAC,QACjBvB,gBAAAA,EAAAA;AAAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,eAAa;AAAA,QAEb,OAAOmB;AAAA,QACP,MAAAC;AAAA,MAAA;AAAA,MAFKD;AAAA,IAAA,CAIR,GACH,EAAA,CACF;AAAA,IACChB;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;"}

package/dist/TabCard/TabCardPanel.d.ts

@@ -0,0 +1,22 @@
+import { SxProps, Theme } from '@mui/material';
+/**
+ * Props for the TabCardPanel component
+ */
+export interface TabCardPanelProps {
+    /**
+     * Tab index or array of indices that this panel corresponds to
+     */
+    index: number | number[];
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Content to display when the panel is active
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Content panel for TabCard that displays when its tab is active
+ */
+export default function TabCardPanel({ index, children, sx, }: TabCardPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/TabCard/index.d.ts

@@ -0,0 +1,3 @@
+export type { TabCardProps, TabData } from './TabCard';
+export { default, default as TabCard } from './TabCard';
+export * from './TabCardPanel';

package/dist/TabPanel/TabPanel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for the TabPanel component
+ */
+interface TabPanelProps {
+    /**
+     * Panel content
+     */
+    children?: React.ReactNode;
+    /**
+     * Tab index or array of indices that this panel corresponds to
+     */
+    index: number | number[];
+}
+/**
+ * Content panel that displays when its associated tab is active
+ */
+export declare function TabPanel({ children, index }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/TabPanel/TabPanel.mjs

@@ -0,0 +1,22 @@
+import { j as e } from "../_virtual/jsx-runtime.mjs";
+import { useTab as l } from "../TabProvider/TabProvider.context.mjs";
+import "react";
+import o from "../node_modules/@mui/material/esm/Box/Box.mjs";
+function n({ children: i, index: r }) {
+  const [t] = l();
+  let a = t === r;
+  return Array.isArray(r) && (a = r.includes(t)), /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: !a,
+      id: `simple-tabpanel-${r}`,
+      "aria-labelledby": `simple-tab-${r}`,
+      children: a && /* @__PURE__ */ e.jsx(o, { sx: { p: 3 }, children: i })
+    }
+  );
+}
+export {
+  n as TabPanel
+};
+//# sourceMappingURL=TabPanel.mjs.map

package/dist/TabPanel/TabPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.mjs","sources":["../../src/TabPanel/TabPanel.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport { useTab } from \"../TabProvider\";\n\n/**\n * Props for the TabPanel component\n */\ninterface TabPanelProps {\n  /**\n   * Panel content\n   */\n  children?: React.ReactNode;\n  /**\n   * Tab index or array of indices that this panel corresponds to\n   */\n  index: number | number[];\n}\n\n/**\n * Content panel that displays when its associated tab is active\n */\nexport function TabPanel({ children, index }: TabPanelProps) {\n  const [value] = useTab();\n  let isTab = value === index;\n  if (Array.isArray(index)) {\n    isTab = index.includes(value);\n  }\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isTab}\n      id={`simple-tabpanel-${index}`}\n      aria-labelledby={`simple-tab-${index}`}\n    >\n      {isTab && <Box sx={{ p: 3 }}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["TabPanel","children","index","value","useTab","isTab","jsx","Box"],"mappings":";;;;AAoBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,KAAwB;AAC3D,QAAM,CAACC,CAAK,IAAIC,EAAA;AAChB,MAAIC,IAAQF,MAAUD;AACtB,SAAI,MAAM,QAAQA,CAAK,MACrBG,IAAQH,EAAM,SAASC,CAAK,IAI5BG,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,CAACD;AAAA,MACT,IAAI,mBAAmBH,CAAK;AAAA,MAC5B,mBAAiB,cAAcA,CAAK;AAAA,MAEnC,UAAAG,2BAAUE,GAAA,EAAI,IAAI,EAAE,GAAG,EAAA,GAAM,UAAAN,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG7C;"}

package/dist/TabPanel/index.d.ts

@@ -0,0 +1 @@
+export * from './TabPanel';

package/dist/TabProvider/TabProvider.context.mjs

@@ -0,0 +1,8 @@
+import { createContext as o, useContext as e } from "react";
+const t = o([0, () => null]), r = t.Provider, s = () => e(t);
+export {
+  t as TabContext,
+  r as TabContextProvider,
+  s as useTab
+};
+//# sourceMappingURL=TabProvider.context.mjs.map

package/dist/TabProvider/TabProvider.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabProvider.context.mjs","sources":["../../src/TabProvider/TabProvider.context.ts"],"sourcesContent":["import {\n  createContext,\n  type Dispatch,\n  type SetStateAction,\n  useContext,\n} from \"react\";\n\nexport const TabContext = createContext<\n  [number, Dispatch<SetStateAction<number>>]\n>([0, () => null]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n"],"names":["TabContext","createContext","TabContextProvider","useTab","useContext"],"mappings":";AAOO,MAAMA,IAAaC,EAExB,CAAC,GAAG,MAAM,IAAI,CAAC,GACJC,IAAqBF,EAAW,UAChCG,IAAS,MAAMC,EAAWJ,CAAU;"}

package/dist/TabProvider/TabProvider.provider.mjs

@@ -0,0 +1,14 @@
+import { j as e } from "../_virtual/jsx-runtime.mjs";
+import { useState as a } from "react";
+import { TabContextProvider as m } from "./TabProvider.context.mjs";
+const p = ({
+  children: t,
+  initialValue: r = 0
+}) => {
+  const o = a(r);
+  return /* @__PURE__ */ e.jsx(m, { value: o, children: t });
+};
+export {
+  p as TabProvider
+};
+//# sourceMappingURL=TabProvider.provider.mjs.map

package/dist/TabProvider/TabProvider.provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabProvider.provider.mjs","sources":["../../src/TabProvider/TabProvider.provider.tsx"],"sourcesContent":["import { type PropsWithChildren, useState } from \"react\";\nimport { TabContextProvider } from \"./TabProvider.context\";\n\ntype TabProviderProps = PropsWithChildren<{\n  initialValue?: number;\n}>;\n\nexport const TabProvider = ({\n  children,\n  initialValue = 0,\n}: TabProviderProps) => {\n  const tabState = useState(initialValue);\n\n  return <TabContextProvider value={tabState}>{children}</TabContextProvider>;\n};\n"],"names":["TabProvider","children","initialValue","tabState","useState","jsx","TabContextProvider"],"mappings":";;;AAOO,MAAMA,IAAc,CAAC;AAAA,EAC1B,UAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAAwB;AACtB,QAAMC,IAAWC,EAASF,CAAY;AAEtC,SAAOG,gBAAAA,EAAAA,IAACC,GAAA,EAAmB,OAAOH,GAAW,UAAAF,EAAA,CAAS;AACxD;"}