@pismo/marola 2.0.0 → 2.0.2

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

@@ -1,15 +1,8 @@
 import { StoryObj } from '@storybook/react';
+import { RadioButtonProps } from './RadioButton';
 declare const meta: {
     title: string;
-    component: ({ className, name, label, checked, disabled, "data-testid": dataTestId, onChange, }: {
-        className?: string | undefined;
-        name?: string | undefined;
-        label?: import('react').ReactNode;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        'data-testid'?: string | undefined;
-        onChange: (state: boolean) => void;
-    }) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, name, label, disabled, defaultValue, checked, "data-testid": dataTestId, onChange, children, }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -18,6 +11,8 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
-export declare const WithLabel: Story;
-export declare const Disabled: Story;
-export declare const WithOnChangeAction: Story;
+export declare const WithDisabledOption: Story;
+export declare const WithOnChangeTrigger: Story;
+export declare const WithDefaultValue: Story;
+export declare const WithLegacyLabel: Story;
+export declare const DisabledLegacy: Story;

package/dist/components/RadioButton/RadioOption.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type RadioOptionProps = {
+    /** Component label */
+    label?: React.ReactNode;
+    /** Component value */
+    value?: string | number | boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /**Option testId */
+    'data-testid'?: string;
+};
+export declare const RadioOption: ({ label, value, disabled, "data-testid": dataTestId }: RadioOptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RadioButton/RadioOption.js

@@ -0,0 +1,438 @@
+import { jsxs as A, jsx as k } from "react/jsx-runtime";
+import { c as B } from "../../clsx-OuTLNxxd.js";
+import "../Icon/Icon.js";
+import { Typography as K } from "../Typography/Typography.js";
+import * as a from "react";
+import "../Input/Input.js";
+import "../Avatar/Avatar.js";
+import "../Button/Button.js";
+import "../../Toggle-DEVeyo2f.js";
+import "../Dialog/Dialog.js";
+import "../IconButton/IconButton.js";
+import "../InputSearch/InputSearch.js";
+import "../Select/Select.js";
+import "../Popover/Popover.js";
+import { u as v, a as j, b as E, c as U, d as w, e as F, m as I, f as q, g as V, h as M, r as z, i as J, N as Q, s as N } from "../../RadioButton.module-B4kmS66R.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import "../../Group-Cyc1W1kV.js";
+import "../../contexts/SnackbarProvider/SnackbarProvider.js";
+import { P as s } from "../../useSlotProps-DSnfx453.js";
+import { r as W } from "../../index-CATDT7fJ.js";
+function X(r, e = !1) {
+  const [n, o] = a.useState(), [t, d] = a.useState(r);
+  return r && !t && (d(!0), n !== "starting" && !e && o("starting")), !r && t && n !== "ending" && o("ending"), !r && !t && n === "ending" && o(void 0), v(() => {
+    if (!r)
+      return;
+    e && o("starting");
+    const i = requestAnimationFrame(() => {
+      o(void 0);
+    });
+    return () => {
+      cancelAnimationFrame(i);
+    };
+  }, [r, e]), a.useMemo(() => ({
+    mounted: t,
+    setMounted: d,
+    transitionStatus: n
+  }), [t, n]);
+}
+function Y(r = {}) {
+  const {
+    label: e,
+    metadata: n
+  } = r, {
+    register: o,
+    unregister: t,
+    map: d,
+    elementsRef: i,
+    labelsRef: u
+  } = j(), [l, m] = a.useState(null), f = a.useRef(null), R = a.useCallback((c) => {
+    if (f.current = c, l !== null && (i.current[l] = c, u)) {
+      const h = e !== void 0;
+      u.current[l] = h ? e : (c == null ? void 0 : c.textContent) ?? null;
+    }
+  }, [l, i, u, e]);
+  return v(() => {
+    const c = f.current;
+    if (c)
+      return o(c, n), () => {
+        t(c);
+      };
+  }, [o, t, n]), v(() => {
+    var h;
+    const c = f.current ? (h = d.get(f.current)) == null ? void 0 : h.index : null;
+    c != null && m(c);
+  }, [d]), a.useMemo(() => ({
+    ref: R,
+    index: l ?? -1
+  }), [l, R]);
+}
+const Z = {
+  "data-starting-style": ""
+}, $ = {
+  "data-ending-style": ""
+}, ee = {
+  transitionStatus(r) {
+    return r === "starting" ? Z : r === "ending" ? $ : null;
+  }
+};
+function te(r, e = !1) {
+  const n = a.useRef(-1), o = a.useRef(-1), t = E(() => {
+    cancelAnimationFrame(n.current), clearTimeout(o.current);
+  });
+  return a.useEffect(() => t, [t]), E((d) => {
+    t();
+    const i = r.current;
+    i && (typeof i.getAnimations != "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED ? d() : n.current = requestAnimationFrame(() => {
+      function u() {
+        i && Promise.allSettled(i.getAnimations().map((l) => l.finished)).then(() => {
+          W.flushSync(d);
+        });
+      }
+      e ? o.current = window.setTimeout(u) : u();
+    }));
+  });
+}
+function ne(r) {
+  const {
+    open: e,
+    ref: n,
+    onComplete: o
+  } = r, t = U(e), d = E(o), i = te(n, e);
+  v(() => {
+    i(() => {
+      e === t.current && d();
+    });
+  }, [e, d, i, t]);
+}
+const oe = {
+  clip: "rect(0 0 0 0)",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  border: 0,
+  padding: 0,
+  width: 1,
+  height: 1,
+  margin: -1
+};
+function re(r) {
+  const {
+    disabled: e,
+    readOnly: n,
+    value: o,
+    required: t
+  } = r, {
+    checkedValue: d,
+    setCheckedValue: i,
+    onValueChange: u,
+    touched: l,
+    setTouched: m,
+    fieldControlValidation: f
+  } = w(), {
+    setDirty: R,
+    validityData: c,
+    setTouched: h,
+    setFilled: b,
+    validationMode: x
+  } = F(), g = d === o, C = a.useRef(null);
+  v(() => {
+    var y;
+    (y = C.current) != null && y.checked && b(!0);
+  }, [b]);
+  const P = a.useCallback((y) => I(f ? f.getValidationProps(y) : y, {
+    role: "radio",
+    type: "button",
+    "aria-checked": g,
+    "aria-required": t || void 0,
+    "aria-disabled": e || void 0,
+    "aria-readonly": n || void 0,
+    disabled: e,
+    onKeyDown(p) {
+      p.key === "Enter" && p.preventDefault();
+    },
+    onClick(p) {
+      var O;
+      p.defaultPrevented || e || n || (p.preventDefault(), (O = C.current) == null || O.click());
+    },
+    onFocus(p) {
+      var O;
+      p.defaultPrevented || e || n || !l || ((O = C.current) == null || O.click(), m(!1));
+    }
+  }), [f, g, t, e, n, l, m]), T = a.useCallback((y) => I(y, {
+    type: "radio",
+    ref: C,
+    tabIndex: -1,
+    style: oe,
+    "aria-hidden": !0,
+    disabled: e,
+    checked: g,
+    required: t,
+    readOnly: n,
+    onChange(p) {
+      p.nativeEvent.defaultPrevented || e || n || o == null || (h(!0), R(o !== c.initialValue), i(o), b(!0), u == null || u(o, p.nativeEvent), x === "onChange" && (f == null || f.commitValidation(o)));
+    }
+  }), [e, g, t, n, o, h, R, c.initialValue, i, b, u, x, f]);
+  return a.useMemo(() => ({
+    checked: g,
+    getRootProps: P,
+    getInputProps: T
+  }), [g, P, T]);
+}
+const D = /* @__PURE__ */ a.createContext(void 0);
+process.env.NODE_ENV !== "production" && (D.displayName = "RadioRootContext");
+function se() {
+  const r = a.useContext(D);
+  if (r === void 0)
+    throw new Error("Base UI: RadioRootContext is missing. Radio parts must be placed within <Radio.Root>.");
+  return r;
+}
+function ie(r = {}) {
+  const {
+    highlightedIndex: e,
+    onHighlightedIndexChange: n
+  } = q(), {
+    ref: o,
+    index: t
+  } = Y(r), d = e === t, i = a.useCallback((u = {}) => I(u, {
+    tabIndex: d ? 0 : -1,
+    onFocus() {
+      n(t);
+    }
+  }), [d, t, n]);
+  return a.useMemo(() => ({
+    getItemProps: i,
+    ref: o,
+    index: t
+  }), [i, o, t]);
+}
+function _(r) {
+  const {
+    render: e,
+    className: n,
+    itemRef: o,
+    metadata: t,
+    ...d
+  } = r, {
+    highlightedIndex: i
+  } = q(), {
+    getItemProps: u,
+    ref: l,
+    index: m
+  } = ie({
+    metadata: t
+  }), f = a.useMemo(() => ({
+    highlighted: m === i
+  }), [m, i]), R = V(o, l), {
+    renderElement: c
+  } = M({
+    propGetter: u,
+    ref: R,
+    render: e ?? "div",
+    state: f,
+    className: n,
+    extraProps: d
+  });
+  return c();
+}
+process.env.NODE_ENV !== "production" && (_.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: s.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: s.oneOfType([s.func, s.string]),
+  /**
+   * @ignore
+   */
+  itemRef: z,
+  /**
+   * @ignore
+   */
+  metadata: s.any,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: s.oneOfType([s.element, s.func])
+});
+const H = {
+  checked(r) {
+    return r ? {
+      "data-checked": ""
+    } : {
+      "data-unchecked": ""
+    };
+  },
+  ...ee,
+  ...J
+}, G = /* @__PURE__ */ a.forwardRef(function(e, n) {
+  const {
+    render: o,
+    className: t,
+    disabled: d = !1,
+    readOnly: i = !1,
+    required: u = !1,
+    ...l
+  } = e, {
+    disabled: m,
+    readOnly: f,
+    required: R,
+    setCheckedValue: c
+  } = w(), {
+    state: h,
+    disabled: b
+  } = F(), x = b || m || d, g = f || i, C = R || u, {
+    getRootProps: P,
+    getInputProps: T,
+    checked: y
+  } = re({
+    ...e,
+    disabled: x,
+    readOnly: g
+  }), p = a.useMemo(() => ({
+    ...h,
+    required: C,
+    disabled: x,
+    readOnly: g,
+    checked: y
+  }), [h, x, g, y, C]), O = a.useMemo(() => p, [p]), {
+    renderElement: S
+  } = M({
+    propGetter: P,
+    render: o ?? "button",
+    ref: n,
+    className: t,
+    state: p,
+    extraProps: l,
+    customStyleHookMapping: H
+  });
+  return /* @__PURE__ */ A(D.Provider, {
+    value: O,
+    children: [c === Q ? S() : /* @__PURE__ */ k(_, {
+      render: S()
+    }), /* @__PURE__ */ k("input", {
+      ...T()
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (G.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: s.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: s.oneOfType([s.func, s.string]),
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled: s.bool,
+  /**
+   * Whether the user should be unable to select the radio button.
+   * @default false
+   */
+  readOnly: s.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: s.oneOfType([s.element, s.func]),
+  /**
+   * Whether the user must choose a value before submitting a form.
+   * @default false
+   */
+  required: s.bool,
+  /**
+   * The unique identifying value of the radio in a group.
+   */
+  value: s.any.isRequired
+});
+const L = /* @__PURE__ */ a.forwardRef(function(e, n) {
+  const {
+    render: o,
+    className: t,
+    keepMounted: d = !1,
+    ...i
+  } = e, u = se(), l = u.checked, {
+    transitionStatus: m,
+    setMounted: f
+  } = X(l), R = a.useMemo(() => ({
+    ...u,
+    transitionStatus: m
+  }), [u, m]), c = a.useRef(null), h = V(n, c), {
+    renderElement: b
+  } = M({
+    render: o ?? "span",
+    ref: h,
+    className: t,
+    state: R,
+    extraProps: i,
+    customStyleHookMapping: H
+  });
+  return ne({
+    open: l,
+    ref: c,
+    onComplete() {
+      l || f(!1);
+    }
+  }), d || l ? b() : null;
+});
+process.env.NODE_ENV !== "production" && (L.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: s.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: s.oneOfType([s.func, s.string]),
+  /**
+   * Whether to keep the HTML element in the DOM when the radio button is inactive.
+   * @default false
+   */
+  keepMounted: s.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: s.oneOfType([s.element, s.func])
+});
+const Te = ({ label: r, value: e, disabled: n, "data-testid": o }) => {
+  const t = B(N["radio-label"], n && N["radio-label__disabled"]);
+  return /* @__PURE__ */ A("label", { className: N.option, "data-testid": o, children: [
+    /* @__PURE__ */ k(G, { disabled: n, value: e, className: N.radio, children: /* @__PURE__ */ k(L, { className: N.indicator }) }),
+    /* @__PURE__ */ k(K, { color: "var(--colors-neutral-text-color-text)", className: t, variant: "base-lg", children: r })
+  ] });
+};
+export {
+  Te as RadioOption
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -97,6 +97,7 @@
     "vitest-preview": "^0.0.1"
   },
   "dependencies": {
+    "@base-ui-components/react": "^1.0.0-alpha.6",
     "@mui/base": "^5.0.0-beta.40",
     "@mui/material": "^5.15.15"
   }