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

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

@@ -1,31 +1,22 @@
+import { SelectProps } from './Select';
 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;
+        (props: SelectProps): import("react/jsx-runtime").JSX.Element;
+        Option: (props: import('./Select').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
     };
     tags: string[];
+    parameters: {
+        layout: string;
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
-export declare const Disabled: Story;
+export declare const WithAllOptionsDisabled: Story;
+export declare const WithSomeOptionsDisabled: Story;
 export declare const WithPrefix: Story;
-export declare const WithIcon: Story;
+export declare const WithIcons: Story;
+export declare const WithManyOptions: Story;

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

@@ -1,65 +1,89 @@
-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 = {
+import { jsx as e, Fragment as r, jsxs as a } from "react/jsx-runtime";
+import * as d from "react";
+import { useState as h } from "react";
+import { Select as n } from "./Select.js";
+const o = (t) => /* @__PURE__ */ d.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ d.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__ */ d.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" })), g = {
   title: "Components/Select",
-  component: i,
-  tags: ["autodocs"]
-}, O = {
+  component: n,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+};
+function c(t) {
+  const [l, s] = h(""), p = [
+    { id: "1", name: "Frodo" },
+    { id: "2", name: "Sam" },
+    { id: "3", name: "Merry" },
+    { id: "4", name: "Pippin" }
+  ];
+  return /* @__PURE__ */ a(r, { children: [
+    /* @__PURE__ */ e(n, { ...t, value: l, onChange: (i) => s(i), children: p.map((i) => /* @__PURE__ */ e(n.Option, { value: i.id, children: i.name }, i.id)) }),
+    l && /* @__PURE__ */ a("pre", { style: { borderRadius: 4, background: "#fafafa", padding: 16, color: "#777777" }, children: [
+      "// selected character",
+      /* @__PURE__ */ e("br", {}),
+      JSON.stringify(
+        p.find((i) => i.id === l),
+        null,
+        4
+      )
+    ] })
+  ] });
+}
+const f = {
+  args: {
+    placeholder: "Select an option"
+  },
+  render: c
+}, S = {
+  name: "With all options disabled",
+  args: {
+    placeholder: "Select an option",
+    disabled: !0
+  },
+  render: c
+}, v = {
+  name: "With some options disabled",
   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" })
+    children: /* @__PURE__ */ a(r, { children: [
+      /* @__PURE__ */ e(n.Option, { value: "1", disabled: !0, children: "Frodo" }),
+      /* @__PURE__ */ e(n.Option, { value: "2", children: "Sam" }),
+      /* @__PURE__ */ e(n.Option, { value: "3", disabled: !0, children: "Merry" }),
+      /* @__PURE__ */ e(n.Option, { value: "4", children: "Pippin" })
     ] })
   }
-}, L = {
+}, O = {
+  name: "With prefix",
   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 = {
+    prefix: "Filter by:"
+  },
+  render: c
+}, y = {
+  name: "With icons",
   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" })
+    children: /* @__PURE__ */ a(r, { children: [
+      /* @__PURE__ */ e(n.Option, { value: "1", icon: /* @__PURE__ */ e(o, {}), children: "Frodo" }),
+      /* @__PURE__ */ e(n.Option, { value: "2", icon: /* @__PURE__ */ e(o, {}), children: "Sam" }),
+      /* @__PURE__ */ e(n.Option, { value: "3", icon: /* @__PURE__ */ e(o, {}), children: "Merry" }),
+      /* @__PURE__ */ e(n.Option, { value: "4", icon: /* @__PURE__ */ e(o, {}), children: "Pippin" })
     ] })
   }
-}, g = {
+}, L = {
+  name: "With many options",
   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" })
-    ] })
+    children: /* @__PURE__ */ e(r, { children: [...Array(20).keys()].map((t) => /* @__PURE__ */ e(n.Option, { value: String(t + 1), children: `Item #${t + 1}` })) })
   }
 };
 export {
-  L as Disabled,
-  O as Simple,
-  g as WithIcon,
-  S as WithPrefix,
-  v as default
+  f as Simple,
+  S as WithAllOptionsDisabled,
+  y as WithIcons,
+  L as WithManyOptions,
+  O as WithPrefix,
+  v as WithSomeOptionsDisabled,
+  g as default
 };

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

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

package/dist/components/Select/SelectButton.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../clsx-DB4S2d7J.js";
 import "../Typography/Typography.js";
-import { B } from "../../SelectButton-DWtqAiwt.js";
+import { S as e } from "../../SelectButton-DWZ2BRaX.js";
 export {
-  B as Button
+  e as SelectButton
 };

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

@@ -1,13 +1,25 @@
 import { InputHTMLAttributes } from 'react';
 
-type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
+export type SnackbarVariant = 'success' | 'error' | 'warning';
+export type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
+    /** Snackbar variant */
+    variant: SnackbarVariant;
+    /** Message of snackbar */
+    snackbarMessage: string;
+    /** The open state for component visibility  */
     open?: boolean;
+    /** ID that tests can use to get this component from the DOM */
     'data-testid'?: string;
+    /** Space seperated list of CSS classes to apply */
     classNameWrapper?: string;
-    color?: 'success' | 'error' | 'attention';
-    snackbarMessage: string;
+    /** Duration of visibility */
     autoHideDuration?: number;
+    /** Callback for when close is clicked */
     onClose?: () => void;
 };
-export declare const Snackbar: ({ snackbarMessage, color, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * Snackbars (also known as toasts) are used for
+ * brief notification of processes that
+ * have been or will be performed.
+ * */
+export declare const Snackbar: ({ snackbarMessage, variant, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;