@pismo/marola 0.0.1-alpha.9 → 1.0.0-beta.0

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

@@ -0,0 +1,22 @@
+import { SelectProps } from './Select';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: {
+        (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 WithAllOptionsDisabled: Story;
+export declare const WithSomeOptionsDisabled: Story;
+export declare const WithPrefix: Story;
+export declare const WithIcons: Story;
+export declare const WithManyOptions: Story;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+export interface SelectButtonProps {
+    className: string;
+    children: ReactNode;
+    disabled: boolean;
+    'aria-expanded': boolean;
+    prefix?: string;
+    'data-testid'?: string;
+    onClick: () => void;
+}
+export declare const SelectButton: 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 { S as e } from "../../SelectButton-C8JQKaf4.js";
+export {
+  e as SelectButton
+};

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,17 +1,24 @@
 /// <reference types="react" />
-type SkeletonProps = {
+export type SkeletonProps = {
+    /** CSS styles to be applied on the container element */
     style?: React.CSSProperties | undefined;
+    /** CSS classes to be applied on the container element */
     className?: string;
+    /** Id to be applied as `data-testid` on the container element */
     'data-testid'?: string;
 };
 declare const Skeleton: (props: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
-type SkeletonCircleProps = SkeletonProps & {
+export type SkeletonCircleProps = SkeletonProps & {
+    /** Size of the circle skeleton */
     size?: string | number;
 };
 declare const SkeletonCircle: ({ size, ...props }: SkeletonCircleProps) => import("react/jsx-runtime").JSX.Element;
-type SkeletonTableProps = SkeletonProps & {
+export type SkeletonTableProps = SkeletonProps & {
+    /** Number of columns of the table skeleton */
     columns?: number;
+    /** Number of rows of the table skeleton */
     rows?: number;
+    /** Controls if the with of the cells should be automatically defined */
     autoWidth?: boolean;
 };
 declare const SkeletonTable: ({ columns, rows, autoWidth, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Skeleton.js

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

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: (props: import('./Skeleton').SkeletonProps) => 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 WithCustomStyles: Story;

package/dist/components/Skeleton/SkeletonCircle.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ size, ...props }: import('./Skeleton').SkeletonCircleProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Circle: Story;
+export declare const WithCustomSize: Story;

package/dist/components/Skeleton/SkeletonTable.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ columns, rows, autoWidth, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Table: Story;
+export declare const WithCustomCols: Story;
+export declare const WithCustomRows: Story;
+export declare const WithFixedWidth: Story;

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

@@ -1,13 +1,27 @@
 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;
+    /** Callback for when closed */
+    onClosed?: () => 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, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;