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

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,66 @@
+import '../../assets/global.css';
+import { jsxs as l, Fragment as t, jsx as e } from "react/jsx-runtime";
+/* empty css                    */
+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/Skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type SkeletonProps = {
+    style?: React.CSSProperties | undefined;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Skeleton: (props: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+type SkeletonCircleProps = SkeletonProps & {
+    size?: string | number;
+};
+declare const SkeletonCircle: ({ size, ...props }: SkeletonCircleProps) => import("react/jsx-runtime").JSX.Element;
+type SkeletonTableProps = SkeletonProps & {
+    columns?: number;
+    rows?: number;
+    autoWidth?: boolean;
+};
+declare const SkeletonTable: ({ columns, rows, autoWidth, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+export { Skeleton, SkeletonCircle, SkeletonTable };

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,26 @@
+import '../../assets/Skeleton.css';
+import { jsx as l, jsxs as w } from "react/jsx-runtime";
+import { c as a } from "../../clsx-DB4S2d7J.js";
+const N = "_skeleton_1lho5_1", p = "_skeletonLoading_1lho5_1", s = {
+  skeleton: N,
+  "skeleton--table-type": "_skeleton--table-type_1lho5_1",
+  skeletonLoading: p,
+  "skeleton--circle-type": "_skeleton--circle-type_1lho5_15"
+}, i = (e) => {
+  const t = a(s.skeleton, s["skeleton--normal-type"], e.className);
+  return /* @__PURE__ */ l("div", { style: {}, ...e, className: t });
+}, C = ({ size: e = "4rem", ...t }) => {
+  const n = a(s.skeleton, s["skeleton--circle-type"], t.className);
+  return /* @__PURE__ */ l("div", { ...t, style: { width: e, height: e }, className: n });
+}, h = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, $ = ({ columns: e = 5, rows: t = 5, autoWidth: n = !0, ...r }) => {
+  const k = a(s.skeleton, s["skeleton--table-type"], r.className), c = `${100 / e}%`, d = /* @__PURE__ */ l("tr", { children: new Array(e).fill(null).map((y, o) => /* @__PURE__ */ l("th", { style: { width: c }, children: /* @__PURE__ */ l(i, { style: { width: n ? h(50) : "100%" } }) }, `row-columns-${o}`)) }), m = new Array(t).fill(null).map((y, o) => /* @__PURE__ */ l("tr", { children: new Array(e).fill(null).map((b, _) => /* @__PURE__ */ l("td", { style: { width: c }, children: /* @__PURE__ */ l(i, { style: { width: n ? h() : "100%" } }) }, `row-${o}-cell-${_}`)) }, `row-${o}`));
+  return /* @__PURE__ */ w("table", { ...r, className: k, children: [
+    /* @__PURE__ */ l("thead", { children: d }),
+    /* @__PURE__ */ l("tbody", { children: m })
+  ] });
+};
+export {
+  i as Skeleton,
+  C as SkeletonCircle,
+  $ as SkeletonTable
+};

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,13 @@
+import { InputHTMLAttributes } from 'react';
+
+type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
+    open?: boolean;
+    'data-testid'?: string;
+    classNameWrapper?: string;
+    color?: 'success' | 'error' | 'attention';
+    snackbarMessage: string;
+    autoHideDuration?: number;
+    onClose?: () => void;
+};
+export declare const Snackbar: ({ snackbarMessage, color, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};