@pismo/marola 0.0.1-alpha.12 → 0.0.1-alpha.14

package/dist/components/Chip/Chip.js

@@ -0,0 +1,143 @@
+import '../../assets/Chip.css';
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as u, cloneElement as p } from "react";
+import { c as s } from "../../clsx-DB4S2d7J.js";
+import { Icon as f } from "../Icon/Icon.js";
+import "../Button/Button.js";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import { Skeleton as y } from "../Skeleton/Skeleton.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import { B as g } from "../../Button-B1umG8kJ.js";
+const k = "_h1_1hro6_1", q = "_h2_1hro6_11", C = "_h3_1hro6_21", x = "_h4_1hro6_31", N = "_body_1hro6_41", v = "_quote_1hro6_75", S = "_form__input_1hro6_98", w = "_form__hint_1hro6_103", M = "_form__label_1hro6_108", R = "_form__dropdown_1hro6_113", A = "_table__header_1hro6_131", I = "_table__body_1hro6_136", T = "_button_1hro6_159", j = "_SM_1hro6_178", B = "_chip_1hro6_178", E = "_chip__adornment_1hro6_224", P = "_chip__remove_1hro6_229", e = {
+  h1: k,
+  "h1--bold": "_h1--bold_1hro6_7",
+  h2: q,
+  "h2--bold": "_h2--bold_1hro6_17",
+  h3: C,
+  "h3--bold": "_h3--bold_1hro6_27",
+  h4: x,
+  "h4--bold": "_h4--bold_1hro6_37",
+  body: N,
+  "body--large": "_body--large_1hro6_46",
+  "body--medium": "_body--medium_1hro6_50",
+  "body--small": "_body--small_1hro6_54",
+  "body--tiny": "_body--tiny_1hro6_58",
+  "body--bold": "_body--bold_1hro6_62",
+  "body--strikethrough": "_body--strikethrough_1hro6_65",
+  "body--underlined": "_body--underlined_1hro6_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_1hro6_71",
+  quote: v,
+  "quote--large": "_quote--large_1hro6_80",
+  "quote--bold": "_quote--bold_1hro6_85",
+  "quote--strikethrough": "_quote--strikethrough_1hro6_88",
+  "quote--underlined": "_quote--underlined_1hro6_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_1hro6_94",
+  form__input: S,
+  form__hint: w,
+  form__label: M,
+  form__dropdown: R,
+  "form--bold": "_form--bold_1hro6_118",
+  "form--strikethrough": "_form--strikethrough_1hro6_121",
+  "form--underlined": "_form--underlined_1hro6_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_1hro6_127",
+  table__header: A,
+  table__body: I,
+  "table__body--secondary": "_table__body--secondary_1hro6_141",
+  "table--bold": "_table--bold_1hro6_146",
+  "table--strikethrough": "_table--strikethrough_1hro6_149",
+  "table--underlined": "_table--underlined_1hro6_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_1hro6_155",
+  button: T,
+  "button--bold": "_button--bold_1hro6_165",
+  "button--strikethrough": "_button--strikethrough_1hro6_168",
+  "button--underlined": "_button--underlined_1hro6_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_1hro6_174",
+  SM: j,
+  chip: B,
+  "SM--bold": "_SM--bold_1hro6_183",
+  "chip--button": "_chip--button_1hro6_199",
+  "chip--outlined": "_chip--outlined_1hro6_212",
+  "chip--contained": "_chip--contained_1hro6_218",
+  chip__adornment: E,
+  chip__remove: P,
+  "chip__remove--disabled": "_chip__remove--disabled_1hro6_240"
+}, z = u((o, _) => {
+  const { children: d, onClickContent: h, disabled: l, className: n, variant: a } = o;
+  let r = s(
+    e.chip,
+    { [e["chip--outlined"]]: a === "outlined" },
+    { [e["chip--contained"]]: a === "contained" },
+    n
+  );
+  return h ? (r += ` ${e["chip--button"]}`, /* @__PURE__ */ t(
+    g,
+    {
+      onClick: h,
+      disabled: l,
+      "data-testid": o["data-testid"],
+      ref: _,
+      className: r,
+      children: d
+    }
+  )) : /* @__PURE__ */ t("span", { "data-testid": o["data-testid"], ref: _, className: r, children: d });
+}), U = (o) => {
+  const { icon: _, disabled: d = !1, className: h } = o;
+  if (_) {
+    const l = s(e.chip__adornment, h), n = d ? p(_, { color: "rgb(var(--gray-95-rgb), 0.4)" }) : _;
+    return /* @__PURE__ */ t("span", { className: l, children: n });
+  }
+  return null;
+}, Y = u((o, _) => {
+  const {
+    label: d,
+    className: h,
+    onClickContent: l,
+    leftAdornment: n,
+    loading: a = !1,
+    disabled: r = !1,
+    variant: c = "default",
+    onClickRemove: b
+  } = o;
+  return a ? /* @__PURE__ */ t(
+    y,
+    {
+      style: { width: "6rem", height: "2rem", borderRadius: "4rem", display: "inline-flex" },
+      "data-testid": o["data-testid-skeleton"]
+    }
+  ) : /* @__PURE__ */ m(
+    z,
+    {
+      ref: _,
+      "data-testid": o["data-testid"],
+      onClickContent: l,
+      disabled: r,
+      className: h,
+      variant: c,
+      children: [
+        n && /* @__PURE__ */ t(U, { ...n, disabled: r }),
+        d,
+        b && /* @__PURE__ */ t(
+          "span",
+          {
+            className: s(e.chip__remove, { [e["chip__remove--disabled"]]: r }),
+            role: "button",
+            tabIndex: r ? -1 : 0,
+            "aria-label": "remove",
+            onClick: (i) => {
+              i == null || i.stopPropagation(), i == null || i.nativeEvent.stopImmediatePropagation(), b();
+            },
+            "aria-disabled": r,
+            children: /* @__PURE__ */ t(f, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Y as Chip
+};

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

@@ -0,0 +1,40 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<{
+        label: import('react').ReactNode;
+        loading?: boolean | undefined;
+        leftAdornment?: import('./Chip').ChipAdornmentSlotProps | undefined;
+        'data-testid'?: string | undefined;
+        onClickContent?: (() => void) | undefined;
+        onClickRemove?: (() => void) | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        variant?: import('./Chip').Variant | undefined;
+        'data-testid-skeleton'?: string | undefined;
+    } & import('react').RefAttributes<unknown>>;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        label: import('react').ReactNode;
+        loading?: boolean | undefined;
+        leftAdornment?: import('./Chip').ChipAdornmentSlotProps | undefined;
+        'data-testid'?: string | undefined;
+        onClickContent?: (() => void) | undefined;
+        onClickRemove?: (() => void) | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        variant?: import('./Chip').Variant | undefined;
+        'data-testid-skeleton'?: string | undefined;
+        ref?: import('react').LegacyRef<unknown> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Clickable: Story;
+export declare const ClickableWithRemove: Story;
+export declare const FullDefault: Story;
+export declare const FullOutlined: Story;
+export declare const FullContained: Story;

package/dist/components/Chip/Chip.stories.js

@@ -0,0 +1,59 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Chip as i } from "./Chip.js";
+import { Icon as e } from "../Icon/Icon.js";
+import "../Button/Button.js";
+import "react";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const f = {
+  title: "Components/Chip",
+  component: i,
+  tags: ["autodocs"],
+  decorators: [
+    (s) => /* @__PURE__ */ a("div", { style: { padding: "1em" }, children: /* @__PURE__ */ a(s, {}) })
+  ]
+}, r = {
+  args: {
+    label: "Example text"
+  }
+}, t = {
+  args: {
+    ...r == null ? void 0 : r.args,
+    onClickContent: () => alert("Button was clicked!")
+  }
+}, n = {
+  args: {
+    ...t == null ? void 0 : t.args,
+    onClickRemove: () => alert("Remove changes!")
+  }
+}, o = {
+  args: {
+    ...n == null ? void 0 : n.args,
+    leftAdornment: {
+      icon: /* @__PURE__ */ a(e, { icon: "calendar-days", color: "rgba(var(--gray-95-rgb), 0.45)", size: "1.125rem" })
+    }
+  }
+}, b = {
+  args: {
+    ...o == null ? void 0 : o.args,
+    variant: "outlined"
+  }
+}, j = {
+  args: {
+    ...o == null ? void 0 : o.args,
+    variant: "contained"
+  }
+};
+export {
+  t as Clickable,
+  n as ClickableWithRemove,
+  j as FullContained,
+  o as FullDefault,
+  b as FullOutlined,
+  r as Simple,
+  f as default
+};

package/dist/components/Chip/chip.test.d.ts

@@ -0,0 +1 @@
+export {};