@pismo/marola 0.0.1-alpha.11 → 0.0.1-alpha.13

package/dist/components/Select/Select.stories.d.ts

@@ -0,0 +1,31 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: {
+        (props: {
+            children: import('react').ReactNode;
+            disabled?: boolean | undefined;
+            placeholder?: string | number | undefined;
+            ariaLabelledby?: string | undefined;
+            onChange?: ((value: string | number | null, event?: import('react').SyntheticEvent<Element, Event> | null | undefined) => void) | undefined;
+            className?: string | undefined;
+            'data-testid'?: string | undefined;
+        }): import("react/jsx-runtime").JSX.Element;
+        Option: (props: {
+            disabled?: boolean | undefined;
+            value: string | number;
+            children: import('react').ReactNode;
+            icon?: import('react').ReactNode;
+            className?: string | undefined;
+            'data-testid'?: string | undefined;
+        }) => import("react/jsx-runtime").JSX.Element;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Disabled: Story;
+export declare const WithPrefix: Story;
+export declare const WithIcon: Story;

package/dist/components/Select/Select.stories.js

@@ -0,0 +1,65 @@
+import { jsxs as l, Fragment as t, jsx as e } from "react/jsx-runtime";
+import "../Chip/Chip.js";
+import "../Button/Button.js";
+import * as n from "react";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import { Select as i } from "./Select.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const r = (o) => /* @__PURE__ */ n.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__PURE__ */ n.createElement("path", { d: "M0.512792 11.6594C0.139667 11.2516 0.167167 10.6184 0.574323 10.2447C0.766229 10.0688 1.00839 9.98175 1.24964 9.98175C1.52063 9.98175 1.79026 10.0912 1.98745 10.3064L2.99998 11.4406V2.00094C2.99998 1.44781 3.44779 1 3.99998 1C4.55217 1 4.99998 1.44781 4.99998 2.00094V11.4384L6.01248 10.3325C6.38748 9.92812 7.01873 9.89687 7.42498 10.2719C7.83216 10.6453 7.85935 11.2787 7.48651 11.6866L4.76463 14.6894C4.38588 15.1037 3.66901 15.1037 3.28995 14.6894L0.512792 11.6594Z", fill: "#1897F3" }), /* @__PURE__ */ n.createElement("path", { opacity: 0.4, d: "M9.99998 3H11.5859L9.29279 5.29313C9.00666 5.57925 8.92123 6.00906 9.07598 6.38313C9.23073 6.75719 9.59566 7 9.99973 7H13.9716C14.5531 6.97188 15 6.55313 15 6C15 5.44688 14.5522 5 14 5H12.414L14.7072 2.70688C14.9933 2.42075 15.0787 1.99094 14.924 1.61688C14.7692 1.24281 14.4031 1 13.9719 1H9.99998C9.44685 1 8.99998 1.44719 8.99998 2C8.99998 2.55281 9.44685 3 9.99998 3ZM15.3937 13.5406L12.894 8.5375C12.5553 7.85594 11.444 7.85594 11.1053 8.5375L8.6056 13.5406C8.35854 14.0378 8.55873 14.6419 9.05279 14.8903C9.54873 15.1379 10.1478 14.9365 10.3944 14.4403L10.6179 13.9906H13.3814L13.6049 14.4403C13.7979 14.8288 14.354 15.1863 14.9465 14.8903C15.4406 14.6438 15.6406 14.0375 15.3937 13.5406ZM11.4937 12.2313L12 11.2094L12.5069 12.2291H11.4937V12.2313Z", fill: "#1897F3" })), v = {
+  title: "Components/Select",
+  component: i,
+  tags: ["autodocs"]
+}, O = {
+  args: {
+    placeholder: "Select an option",
+    children: /* @__PURE__ */ l(t, { children: [
+      /* @__PURE__ */ e(i.Option, { value: "1", children: "Frodo" }),
+      /* @__PURE__ */ e(i.Option, { value: "2", children: "Sam" }),
+      /* @__PURE__ */ e(i.Option, { value: "3", children: "Mery" }),
+      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
+    ] })
+  }
+}, L = {
+  args: {
+    placeholder: "Select an option",
+    children: /* @__PURE__ */ l(t, { children: [
+      /* @__PURE__ */ e(i.Option, { value: "1", children: "Frodo" }),
+      /* @__PURE__ */ e(i.Option, { value: "2", children: "Sam" }),
+      /* @__PURE__ */ e(i.Option, { value: "3", children: "Mery" }),
+      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
+    ] }),
+    disabled: !0
+  }
+}, S = {
+  args: {
+    placeholder: "Select an option",
+    ariaLabelledby: "Filter by",
+    children: /* @__PURE__ */ l(t, { children: [
+      /* @__PURE__ */ e(i.Option, { value: "1", children: "Frodo" }),
+      /* @__PURE__ */ e(i.Option, { value: "2", children: "Sam" }),
+      /* @__PURE__ */ e(i.Option, { value: "3", children: "Mery" }),
+      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
+    ] })
+  }
+}, g = {
+  args: {
+    placeholder: "Select an option",
+    ariaLabelledby: "Filter by",
+    children: /* @__PURE__ */ l(t, { children: [
+      /* @__PURE__ */ e(i.Option, { value: "1", disabled: !0, children: "Frodo" }),
+      /* @__PURE__ */ e(i.Option, { value: "2", icon: /* @__PURE__ */ e(r, {}), children: "Sam" }),
+      /* @__PURE__ */ e(i.Option, { value: "3", disabled: !0, children: "Mery" }),
+      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
+    ] })
+  }
+};
+export {
+  L as Disabled,
+  O as Simple,
+  g as WithIcon,
+  S as WithPrefix,
+  v as default
+};

package/dist/components/Select/SelectButton.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export interface SelectButtonProps {
+    className: string;
+    children: ReactNode;
+    disabled: boolean;
+    'aria-expanded': boolean;
+    'aria-labelledby': string | number;
+    type?: HTMLButtonElement['type'];
+    onClick: () => void;
+    'data-testid'?: string;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Select/SelectButton.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "react";
+import "../../clsx-DB4S2d7J.js";
+import "../Typography/Typography.js";
+import { B } from "../../SelectButton-DWtqAiwt.js";
+export {
+  B as Button
+};

package/dist/components/Snackbar/Snackbar.js

@@ -7,8 +7,9 @@ import { Icon as K } from "../Icon/Icon.js";
 import { a as w, _ as j } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
 import { g as $, a as z, e as H, b as U, P as t, c as J, d as Q } from "../../index-CqjC7P5Y.js";
 import { u as Z } from "../../useTimeout-DxF9kiZL.js";
-import { u as I, R as D } from "../../index-BNWbc5Kh.js";
-import { C as B } from "../../ClickAwayListener-BKznXF1d.js";
+import { u as I } from "../../useEventCallback-vAfOD-oT.js";
+import { C as B } from "../../ClickAwayListener-HI1G6ob9.js";
+import { R as D } from "../../index-BJ8HbRCy.js";
 const W = "Snackbar";
 function ee(u) {
   return $(W, u);
@@ -558,7 +559,7 @@ const ae = "_snackbar_kt3bd_1", ue = "_bottomToTop_kt3bd_1", T = {
   "snackbar--message": "_snackbar--message_kt3bd_38",
   "snackbar--action": "_snackbar--action_kt3bd_46",
   bottomToTop: ue
-}, xe = ({
+}, ve = ({
   snackbarMessage: u,
   color: s,
   autoHideDuration: a = 5e3,
@@ -618,5 +619,5 @@ const ae = "_snackbar_kt3bd_1", ue = "_bottomToTop_kt3bd_1", T = {
   ) });
 };
 export {
-  xe as Snackbar
+  ve as Snackbar
 };

package/dist/components/Tabs/Tab.js

@@ -1,8 +1,182 @@
-import "react/jsx-runtime";
-import "react";
-import "../../clsx-DB4S2d7J.js";
-import "../../Tabs.module-yYcTJnj6.js";
-import { T as a } from "../../Tab-CRwnhsj5.js";
+import { jsx as N } from "react/jsx-runtime";
+import * as b from "react";
+import { forwardRef as H, useContext as U, useMemo as j } from "react";
+import { c as k } from "../../clsx-DB4S2d7J.js";
+import { u as B, T as D, s as y } from "../../Tabs.module-jkH1Qjn7.js";
+import { a as d, _ as L } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { g as W, a as $, u as O, e as q, b as z, P as e, c as A, d as G } from "../../index-CqjC7P5Y.js";
+import { u as J, c as K } from "../../combineHooksSlotProps-BHqhiBfc.js";
+import { u as Q, a as X } from "../../useCompoundItem-D1iRfg8D.js";
+import { u as Y } from "../../useButton-Bc8IAgyk.js";
+const E = "Tab";
+function Z(o) {
+  return W(E, o);
+}
+$(E, ["root", "selected", "disabled"]);
+function ee(o) {
+  return o.size;
+}
+function te(o) {
+  const {
+    value: t,
+    rootRef: s,
+    disabled: n = !1,
+    id: c
+  } = o, a = b.useRef(null), r = Q(c), {
+    value: f,
+    selectionFollowsFocus: p,
+    getTabPanelId: m
+  } = B(), P = b.useMemo(() => ({
+    disabled: n,
+    ref: a,
+    id: r
+  }), [n, a, r]), {
+    id: l,
+    index: R,
+    totalItemCount: g
+  } = X(t ?? ee, P), {
+    getRootProps: h,
+    highlighted: T,
+    selected: i
+  } = J({
+    item: l
+  }), {
+    getRootProps: C,
+    rootRef: u,
+    active: v,
+    focusVisible: I,
+    setFocusVisible: V
+  } = Y({
+    disabled: n,
+    focusableWhenDisabled: !p,
+    type: "button"
+  }), _ = O(a, s, u), M = l !== void 0 ? m(l) : void 0;
+  return {
+    getRootProps: (x = {}) => {
+      const S = q(x), w = K(h, C);
+      return d({}, x, w(S), {
+        role: "tab",
+        "aria-controls": M,
+        "aria-selected": i,
+        id: r,
+        ref: _
+      });
+    },
+    active: v,
+    focusVisible: I,
+    highlighted: T,
+    index: R,
+    rootRef: _,
+    // the `selected` state isn't set on the server (it relies on effects to be calculated),
+    // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
+    selected: i || l === f,
+    setFocusVisible: V,
+    totalTabsCount: g
+  };
+}
+const oe = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], se = (o) => {
+  const {
+    selected: t,
+    disabled: s
+  } = o;
+  return A({
+    root: ["root", t && "selected", s && "disabled"]
+  }, G(Z));
+}, F = /* @__PURE__ */ b.forwardRef(function(t, s) {
+  var n;
+  const {
+    children: c,
+    disabled: a = !1,
+    slotProps: r = {},
+    slots: f = {},
+    value: p
+  } = t, m = L(t, oe), P = b.useRef(), l = O(P, s), {
+    active: R,
+    highlighted: g,
+    selected: h,
+    getRootProps: T
+  } = te(d({}, t, {
+    rootRef: l,
+    value: p
+  })), i = d({}, t, {
+    active: R,
+    disabled: a,
+    highlighted: g,
+    selected: h
+  }), C = se(i), u = (n = f.root) != null ? n : "button", v = z({
+    elementType: u,
+    getSlotProps: T,
+    externalSlotProps: r.root,
+    externalForwardedProps: m,
+    additionalProps: {
+      ref: s
+    },
+    ownerState: i,
+    className: C.root
+  });
+  return /* @__PURE__ */ N(u, d({}, v, {
+    children: c
+  }));
+});
+process.env.NODE_ENV !== "production" && (F.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: e.oneOfType([e.func, e.shape({
+    current: e.shape({
+      focusVisible: e.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * Callback invoked when new value is being set.
+   */
+  onChange: e.func,
+  /**
+   * The props used for each slot inside the Tab.
+   * @default {}
+   */
+  slotProps: e.shape({
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside the Tab.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: e.shape({
+    root: e.elementType
+  }),
+  /**
+   * You can provide your own value. Otherwise, it falls back to the child position index.
+   */
+  value: e.oneOfType([e.number, e.string])
+});
+const pe = H(
+  ({ children: o, value: t, disabled: s, dataTestId: n }, c) => {
+    const a = U(D), r = j(
+      () => k(
+        y.tabs__tab,
+        t === (a == null ? void 0 : a.value) && y["tabs__tab--selected"],
+        s && y["tabs__tab--disabled"]
+      ),
+      [t, a, s]
+    );
+    return /* @__PURE__ */ N(F, { className: r, disabled: s, value: t, "data-testid": n, ref: c, children: o });
+  }
+);
 export {
-  a as Tab
+  pe as Tab
 };

package/dist/components/Tabs/TabPanel.js

@@ -1,14 +1,15 @@
 import { jsx as T } from "react/jsx-runtime";
-import * as m from "react";
+import * as P from "react";
 import { forwardRef as v } from "react";
-import { u as y, a as x, b as C, s as N } from "../../Tabs.module-yYcTJnj6.js";
-import { a as b, _ } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import { g as w, a as O, u as E, b as I, P as o, c as S, d as U } from "../../index-CqjC7P5Y.js";
+import { u as y, s as x } from "../../Tabs.module-jkH1Qjn7.js";
+import { a as b, _ as C } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { g as N, a as _, u as w, b as O, P as o, c as E, d as I } from "../../index-CqjC7P5Y.js";
+import { u as S, a as U } from "../../useCompoundItem-D1iRfg8D.js";
 const h = "TabPanel";
 function j(t) {
-  return w(h, t);
+  return N(h, t);
 }
-O(h, ["root", "hidden"]);
+_(h, ["root", "hidden"]);
 function M(t) {
   return t.size;
 }
@@ -22,13 +23,13 @@ function V(t) {
     throw new Error("No TabContext provided");
   const {
     value: f,
-    getTabId: P
-  } = i, a = x(s), r = m.useRef(null), c = E(r, n), u = m.useMemo(() => ({
+    getTabId: m
+  } = i, a = S(s), r = P.useRef(null), c = w(r, n), u = P.useMemo(() => ({
     id: a,
     ref: r
   }), [a]), {
     id: l
-  } = C(e ?? M, u), d = l !== f, p = l !== void 0 ? P(l) : void 0;
+  } = U(e ?? M, u), d = l !== f, p = l !== void 0 ? m(l) : void 0;
   return {
     hidden: d,
     getRootProps: (g = {}) => b({
@@ -45,21 +46,21 @@ const F = ["children", "value", "slotProps", "slots"], $ = (t) => {
   const {
     hidden: e
   } = t;
-  return S({
+  return E({
     root: ["root", e && "hidden"]
-  }, U(j));
-}, R = /* @__PURE__ */ m.forwardRef(function(e, s) {
+  }, I(j));
+}, R = /* @__PURE__ */ P.forwardRef(function(e, s) {
   var n;
   const {
     children: i,
     slotProps: f = {},
-    slots: P = {}
-  } = e, a = _(e, F), {
+    slots: m = {}
+  } = e, a = C(e, F), {
     hidden: r,
     getRootProps: c
   } = V(e), u = b({}, e, {
     hidden: r
-  }), l = $(u), d = (n = P.root) != null ? n : "div", p = I({
+  }), l = $(u), d = (n = m.root) != null ? n : "div", p = O({
     elementType: d,
     getSlotProps: c,
     externalSlotProps: f.root,
@@ -110,9 +111,9 @@ process.env.NODE_ENV !== "production" && (R.propTypes = {
    */
   value: o.oneOfType([o.number, o.string])
 });
-const W = v(
-  ({ children: t, value: e, dataTestId: s }, n) => /* @__PURE__ */ T(R, { className: N["tabs__tab-panel"], value: e, "data-testid": s, ref: n, children: t })
+const q = v(
+  ({ children: t, value: e, dataTestId: s }, n) => /* @__PURE__ */ T(R, { className: x["tabs__tab-panel"], value: e, "data-testid": s, ref: n, children: t })
 );
 export {
-  W as TabPanel
+  q as TabPanel
 };