@webiny/admin-ui 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/Textarea/TextareaPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","textareaVariants","variants","variant","primary","secondary","ghost","size","md","lg","xl","invalid","true","compoundVariants","class","defaultVariants","DecoratableTextareaPrimitive","className","textareaRef","forwardEventOnChange","onChange","originalOnChange","onEnter","onKeyDown","originalOnKeyDown","value","props","useCallback","event","target","e","key","createElement","Object","assign","ref","TextareaPrimitive"],"sources":["TextareaPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst textareaVariants = cva(\n    [\n        \"wby-flex wby-min-h-[80px] wby-w-full wby-border-sm wby-text-md focus-visible:wby-outline-none disabled:wby-cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-border-neutral-strong\",\n                    \"focus:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"focus:wby-bg-neutral-base focus:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dark/5\",\n                    \"focus:wby-bg-neutral-dark/5\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed\",\n                    \"data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50\"\n                ]\n            },\n            size: {\n                md: [\"wby-px-sm-extra wby-py-xs-plus wby-rounded-md\"],\n                lg: [\"wby-px-sm-extra wby-py-sm-plus wby-rounded-md\"],\n                xl: [\"wby-px-md-extra wby-p-md wby-rounded-lg\"]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"!wby-border-destructive-subtle !wby-bg-destructive-subtle\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"lg\"\n        }\n    }\n);\n\ninterface TextareaPrimitiveProps\n    extends React.ComponentProps<\"textarea\">,\n        VariantProps<typeof textareaVariants> {\n    /**\n     * Reference to the textarea element.\n     */\n    textareaRef?: React.Ref<HTMLTextAreaElement>;\n\n    /**\n     * If true, it will pass the native `event` to the `onChange` callback\n     */\n    forwardEventOnChange?: boolean;\n\n    /**\n     * Callback function to be called when the Enter key is pressed.\n     */\n    onEnter?: () => void;\n}\n\nconst DecoratableTextareaPrimitive = ({\n    className,\n    variant,\n    invalid,\n    size,\n    textareaRef,\n    forwardEventOnChange,\n    onChange: originalOnChange,\n    onEnter,\n    onKeyDown: originalOnKeyDown,\n    value,\n    ...props\n}: TextareaPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLTextAreaElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    return (\n        <textarea\n            {...props}\n            ref={textareaRef}\n            className={cn(textareaVariants({ variant, invalid, size }), className)}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            value={value ?? \"\"}\n        />\n    );\n};\n\nconst TextareaPrimitive = makeDecoratable(\"TextareaPrimitive\", DecoratableTextareaPrimitive);\n\nexport { TextareaPrimitive, type TextareaPrimitiveProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Textarea/TextareaPrimitive.js","sources":["../../src/Textarea/TextareaPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst textareaVariants = cva(\n    [\n        \"flex min-h-[80px] w-full border-sm text-md focus-visible:outline-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:border-neutral-strong\",\n                    \"focus:border-neutral-black\",\n                    \"disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n                ],\n                secondary: [\n                    \"bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"focus:bg-neutral-base focus:border-neutral-black\",\n                    \"disabled:bg-neutral-disabled disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n                ],\n                ghost: [\n                    \"bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"focus:bg-neutral-dark/5\",\n                    \"disabled:bg-transparent disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50\",\n                    \"hover:bg-neutral-base/20\",\n                    \"focus:bg-neutral-base focus:text-neutral-primary focus:placeholder:text-neutral-dimmed\",\n                    \"data-[focused=true]:bg-neutral-base data-[focused=true]:bg-neutral-primary data-[focused=true]:placeholder:text-neutral-dimmed\",\n                    \"disabled:bg-transparent disabled:text-neutral-disabled/50 disabled:placeholder:text-neutral-disabled/50\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50\"\n                ]\n            },\n            size: {\n                md: [\"px-sm-extra py-xs-plus rounded-md\"],\n                lg: [\"px-sm-extra py-sm-plus rounded-md\"],\n                xl: [\"px-md-extra p-md rounded-lg\"]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"border-destructive-subtle! bg-destructive-subtle!\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"lg\"\n        }\n    }\n);\n\ninterface TextareaPrimitiveProps\n    extends React.ComponentProps<\"textarea\">, VariantProps<typeof textareaVariants> {\n    /**\n     * Reference to the textarea element.\n     */\n    textareaRef?: React.Ref<HTMLTextAreaElement>;\n\n    /**\n     * If true, it will pass the native `event` to the `onChange` callback\n     */\n    forwardEventOnChange?: boolean;\n\n    /**\n     * Callback function to be called when the Enter key is pressed.\n     */\n    onEnter?: () => void;\n}\n\nconst DecoratableTextareaPrimitive = ({\n    className,\n    variant,\n    invalid,\n    size,\n    textareaRef,\n    forwardEventOnChange,\n    onChange: originalOnChange,\n    onEnter,\n    onKeyDown: originalOnKeyDown,\n    value,\n    ...props\n}: TextareaPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLTextAreaElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    return (\n        <textarea\n            {...props}\n            ref={textareaRef}\n            className={cn(textareaVariants({ variant, invalid, size }), className)}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            value={value ?? \"\"}\n        />\n    );\n};\n\nconst TextareaPrimitive = makeDecoratable(\"TextareaPrimitive\", DecoratableTextareaPrimitive);\n\nexport { TextareaPrimitive, type TextareaPrimitiveProps };\n"],"names":["textareaVariants","cva","DecoratableTextareaPrimitive","className","variant","invalid","size","textareaRef","forwardEventOnChange","originalOnChange","onEnter","originalOnKeyDown","value","props","onChange","React","event","onKeyDown","e","cn","TextareaPrimitive","makeDecoratable"],"mappings":";;AAGA,MAAMA,mBAAmBC,IACrB;IACI;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;gBACA;aACH;YACD,WAAW;gBACP;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBAAC;aAAoC;YACzC,IAAI;gBAAC;aAAoC;YACzC,IAAI;gBAAC;aAA8B;QACvC;QACA,SAAS;YACL,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;QACA;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;QACA;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;QACA;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAqBJ,MAAMC,+BAA+B,CAAC,EAClCC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,IAAI,EACJC,WAAW,EACXC,oBAAoB,EACpB,UAAUC,gBAAgB,EAC1BC,OAAO,EACP,WAAWC,iBAAiB,EAC5BC,KAAK,EACL,GAAGC,OACkB;IACrB,MAAMC,WAAWC,wBAAAA,WAAiB,CAC9B,CAACC;QACG,IAAI,CAACP,kBACD;QAIJA,iBAAiBD,uBAAuBQ,QAAQA,MAAM,MAAM,CAAC,KAAK;IACtE,GACA;QAACR;QAAsBC;KAAiB;IAG5C,MAAMQ,YAAYF,wBAAAA,WAAiB,CAC/B,CAACG;QACG,IAAI,AAAmB,cAAnB,OAAOR,WAA0BQ,AAAU,YAAVA,EAAE,GAAG,EACtCR;QAGJ,IAAI,AAA6B,cAA7B,OAAOC,mBACP,OAAOA,kBAAkBO;IAEjC,GACA;QAACP;QAAmBD;KAAQ;IAGhC,OAAO,WAAP,GACI,sCAAC;QACI,GAAGG,KAAK;QACT,KAAKN;QACL,WAAWY,GAAGnB,iBAAiB;YAAEI;YAASC;YAASC;QAAK,IAAIH;QAC5D,UAAUW;QACV,WAAWG;QACX,OAAOL,SAAS;;AAG5B;AAEA,MAAMQ,oBAAoBC,gBAAgB,qBAAqBnB"}

package/Textarea/TextareaPrimitive.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { TextareaPrimitive } from "./TextareaPrimitive";
+import { TextareaPrimitive } from "./TextareaPrimitive.js";
 declare const meta: Meta<typeof TextareaPrimitive>;
 export default meta;
 type Story = StoryObj<typeof TextareaPrimitive>;

package/Textarea/TextareaPrimitive.stories.js

@@ -1,134 +1,142 @@
-import React from "react";
-import { TextareaPrimitive } from "./TextareaPrimitive";
+import react from "react";
+import { TextareaPrimitive } from "./TextareaPrimitive.js";
 const meta = {
-  title: "Components/Form Primitives/Textarea",
-  component: TextareaPrimitive,
-  argTypes: {
-    onChange: {
-      action: "onChange"
+    title: "Components/Form Primitives/Textarea",
+    component: TextareaPrimitive,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        onEnter: {
+            action: "onEnter"
+        },
+        onKeyDown: {
+            action: "onKeyDown"
+        },
+        rows: {
+            control: {
+                type: "number"
+            }
+        }
     },
-    onEnter: {
-      action: "onEnter"
+    parameters: {
+        layout: "padded"
+    }
+};
+const TextareaPrimitive_stories = meta;
+const Default = {};
+const MediumSize = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "md"
+    }
+};
+const LargeSize = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "lg"
+    }
+};
+const ExtraLargeSize = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "xl"
+    }
+};
+const PrimaryVariant = {
+    args: {
+        variant: "primary",
+        placeholder: "Custom placeholder"
+    }
+};
+const PrimaryVariantDisabled = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+const PrimaryVariantInvalid = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+const SecondaryVariant = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+const SecondaryVariantDisabled = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+const SecondaryVariantInvalid = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+const GhostVariant = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+const GhostVariantDisabled = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+const GhostVariantInvalid = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+const GhostNegativeVariant = {
+    args: {
+        variant: "ghost-negative",
+        placeholder: "Custom placeholder"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const GhostNegativeVariantDisabled = {
+    args: {
+        ...GhostNegativeVariant.args,
+        disabled: true
     },
-    onKeyDown: {
-      action: "onKeyDown"
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const GhostNegativeVariantInvalid = {
+    args: {
+        ...GhostNegativeVariant.args,
+        invalid: true
     },
-    rows: {
-      control: {
-        type: "number"
-      }
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const WithForwardEventOnChange = {
+    args: {
+        ...Default.args,
+        forwardEventOnChange: true
     }
-  },
-  parameters: {
-    layout: "padded"
-  }
-};
-export default meta;
-export const Default = {};
-export const MediumSize = {
-  args: {
-    placeholder: "Custom placeholder",
-    size: "md"
-  }
-};
-export const LargeSize = {
-  args: {
-    placeholder: "Custom placeholder",
-    size: "lg"
-  }
-};
-export const ExtraLargeSize = {
-  args: {
-    placeholder: "Custom placeholder",
-    size: "xl"
-  }
-};
-export const PrimaryVariant = {
-  args: {
-    variant: "primary",
-    placeholder: "Custom placeholder"
-  }
-};
-export const PrimaryVariantDisabled = {
-  args: {
-    ...PrimaryVariant.args,
-    disabled: true
-  }
-};
-export const PrimaryVariantInvalid = {
-  args: {
-    ...PrimaryVariant.args,
-    invalid: true
-  }
-};
-export const SecondaryVariant = {
-  args: {
-    variant: "secondary",
-    placeholder: "Custom placeholder"
-  }
-};
-export const SecondaryVariantDisabled = {
-  args: {
-    ...SecondaryVariant.args,
-    disabled: true
-  }
-};
-export const SecondaryVariantInvalid = {
-  args: {
-    ...SecondaryVariant.args,
-    invalid: true
-  }
-};
-export const GhostVariant = {
-  args: {
-    variant: "ghost",
-    placeholder: "Custom placeholder"
-  }
-};
-export const GhostVariantDisabled = {
-  args: {
-    ...GhostVariant.args,
-    disabled: true
-  }
-};
-export const GhostVariantInvalid = {
-  args: {
-    ...GhostVariant.args,
-    invalid: true
-  }
-};
-export const GhostNegativeVariant = {
-  args: {
-    variant: "ghost-negative",
-    placeholder: "Custom placeholder"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const GhostNegativeVariantDisabled = {
-  args: {
-    ...GhostNegativeVariant.args,
-    disabled: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const GhostNegativeVariantInvalid = {
-  args: {
-    ...GhostNegativeVariant.args,
-    invalid: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const WithForwardEventOnChange = {
-  args: {
-    ...Default.args,
-    forwardEventOnChange: true
-  }
 };
+export default TextareaPrimitive_stories;
+export { Default, ExtraLargeSize, GhostNegativeVariant, GhostNegativeVariantDisabled, GhostNegativeVariantInvalid, GhostVariant, GhostVariantDisabled, GhostVariantInvalid, LargeSize, MediumSize, PrimaryVariant, PrimaryVariantDisabled, PrimaryVariantInvalid, SecondaryVariant, SecondaryVariantDisabled, SecondaryVariantInvalid, WithForwardEventOnChange };
 
 //# sourceMappingURL=TextareaPrimitive.stories.js.map

package/Textarea/TextareaPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TextareaPrimitive","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","rows","control","type","parameters","layout","Default","MediumSize","args","placeholder","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","createElement","className","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["TextareaPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { TextareaPrimitive } from \"./TextareaPrimitive\";\n\nconst meta: Meta<typeof TextareaPrimitive> = {\n    title: \"Components/Form Primitives/Textarea\",\n    component: TextareaPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        rows: {\n            control: {\n                type: \"number\"\n            }\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TextareaPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Textarea/TextareaPrimitive.stories.js","sources":["../../src/Textarea/TextareaPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { TextareaPrimitive } from \"./TextareaPrimitive.js\";\n\nconst meta: Meta<typeof TextareaPrimitive> = {\n    title: \"Components/Form Primitives/Textarea\",\n    component: TextareaPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        rows: {\n            control: {\n                type: \"number\"\n            }\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TextareaPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"names":["meta","TextareaPrimitive","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":";;AAIA,MAAMA,OAAuC;IACzC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,SAAS;YAAE,QAAQ;QAAU;QAC7B,WAAW;YAAE,QAAQ;QAAY;QACjC,MAAM;YACF,SAAS;gBACL,MAAM;YACV;QACJ;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,kCAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;QACT,aAAa;IACjB;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;QACT,aAAa;IACjB;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;QACT,aAAa;IACjB;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,SAAS;QACT,aAAa;IACjB;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMC,+BAAsC;IAC/C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,UAAU;IACd;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAME,8BAAqC;IAC9C,MAAM;QACF,GAAGH,qBAAqB,IAAI;QAC5B,SAAS;IACb;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMG,2BAAkC;IAC3C,MAAM;QACF,GAAGjB,QAAQ,IAAI;QACf,sBAAsB;IAC1B;AACJ"}

package/Textarea/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Textarea";
-export * from "./TextareaPrimitive";
+export * from "./Textarea.js";
+export * from "./TextareaPrimitive.js";

package/Textarea/index.js

@@ -1,4 +1,2 @@
-export * from "./Textarea";
-export * from "./TextareaPrimitive";
-
-//# sourceMappingURL=index.js.map
+export * from "./Textarea.js";
+export * from "./TextareaPrimitive.js";

package/TimeAgo/TimeAgo.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TimeAgoProps } from "./types.js";
+export declare function TimeAgo({ datetime, live, opts, locale: _locale, ...rest }: TimeAgoProps): React.JSX.Element;

package/TimeAgo/TimeAgo.js

@@ -0,0 +1,45 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { formatElapsed } from "./formatElapsed.js";
+import { DEFAULT_INTERVALS, getUpdateDelay } from "./getUpdateDelay.js";
+import { getElapsedSeconds } from "./getElapsedSeconds.js";
+import { toISOString } from "./toISOString.js";
+function TimeAgo({ datetime, live = true, opts, locale: _locale, ...rest }) {
+    const [, setTick] = useState(0);
+    const intervals = useMemo(()=>({
+            ...DEFAULT_INTERVALS,
+            ...opts?.updateIntervals
+        }), [
+        opts?.updateIntervals?.underFiveMinutes,
+        opts?.updateIntervals?.underFifteenMinutes,
+        opts?.updateIntervals?.underOneHour
+    ]);
+    useEffect(()=>{
+        if (!live) return;
+        let timer;
+        function schedule() {
+            const elapsed = getElapsedSeconds(datetime, opts?.relativeDate);
+            const delay = getUpdateDelay(elapsed, opts?.minInterval, intervals);
+            if (null === delay) return;
+            timer = setTimeout(()=>{
+                setTick((t)=>t + 1);
+                schedule();
+            }, delay);
+        }
+        schedule();
+        return ()=>clearTimeout(timer);
+    }, [
+        datetime,
+        live,
+        opts?.relativeDate,
+        opts?.minInterval,
+        intervals
+    ]);
+    const seconds = getElapsedSeconds(datetime, opts?.relativeDate);
+    return /*#__PURE__*/ react.createElement("time", {
+        dateTime: toISOString(datetime),
+        ...rest
+    }, formatElapsed(seconds));
+}
+export { TimeAgo };
+
+//# sourceMappingURL=TimeAgo.js.map

package/TimeAgo/TimeAgo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/TimeAgo.js","sources":["../../src/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import React from \"react\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport type { TimeAgoProps } from \"./types.js\";\nimport { formatElapsed } from \"./formatElapsed.js\";\nimport { DEFAULT_INTERVALS, getUpdateDelay } from \"./getUpdateDelay.js\";\nimport { getElapsedSeconds } from \"./getElapsedSeconds.js\";\nimport { toISOString } from \"./toISOString.js\";\n\nexport function TimeAgo({ datetime, live = true, opts, locale: _locale, ...rest }: TimeAgoProps) {\n    const [, setTick] = useState(0);\n\n    const intervals = useMemo(\n        () => ({ ...DEFAULT_INTERVALS, ...opts?.updateIntervals }),\n        [\n            opts?.updateIntervals?.underFiveMinutes,\n            opts?.updateIntervals?.underFifteenMinutes,\n            opts?.updateIntervals?.underOneHour\n        ]\n    );\n\n    useEffect(() => {\n        if (!live) {\n            return;\n        }\n\n        let timer: ReturnType<typeof setTimeout>;\n\n        function schedule() {\n            const elapsed = getElapsedSeconds(datetime, opts?.relativeDate);\n            const delay = getUpdateDelay(elapsed, opts?.minInterval, intervals);\n            if (delay === null) {\n                return;\n            }\n            timer = setTimeout(() => {\n                setTick(t => t + 1);\n                schedule();\n            }, delay);\n        }\n\n        schedule();\n\n        return () => clearTimeout(timer);\n    }, [datetime, live, opts?.relativeDate, opts?.minInterval, intervals]);\n\n    const seconds = getElapsedSeconds(datetime, opts?.relativeDate);\n\n    return (\n        <time dateTime={toISOString(datetime)} {...rest}>\n            {formatElapsed(seconds)}\n        </time>\n    );\n}\n"],"names":["TimeAgo","datetime","live","opts","_locale","rest","setTick","useState","intervals","useMemo","DEFAULT_INTERVALS","useEffect","timer","schedule","elapsed","getElapsedSeconds","delay","getUpdateDelay","setTimeout","t","clearTimeout","seconds","toISOString","formatElapsed"],"mappings":";;;;;AAQO,SAASA,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,IAAI,EAAEC,IAAI,EAAE,QAAQC,OAAO,EAAE,GAAGC,MAAoB;IAC3F,MAAM,GAAGC,QAAQ,GAAGC,SAAS;IAE7B,MAAMC,YAAYC,QACd,IAAO;YAAE,GAAGC,iBAAiB;YAAE,GAAGP,MAAM,eAAe;QAAC,IACxD;QACIA,MAAM,iBAAiB;QACvBA,MAAM,iBAAiB;QACvBA,MAAM,iBAAiB;KAC1B;IAGLQ,UAAU;QACN,IAAI,CAACT,MACD;QAGJ,IAAIU;QAEJ,SAASC;YACL,MAAMC,UAAUC,kBAAkBd,UAAUE,MAAM;YAClD,MAAMa,QAAQC,eAAeH,SAASX,MAAM,aAAaK;YACzD,IAAIQ,AAAU,SAAVA,OACA;YAEJJ,QAAQM,WAAW;gBACfZ,QAAQa,CAAAA,IAAKA,IAAI;gBACjBN;YACJ,GAAGG;QACP;QAEAH;QAEA,OAAO,IAAMO,aAAaR;IAC9B,GAAG;QAACX;QAAUC;QAAMC,MAAM;QAAcA,MAAM;QAAaK;KAAU;IAErE,MAAMa,UAAUN,kBAAkBd,UAAUE,MAAM;IAElD,OAAO,WAAP,GACI,oBAAC;QAAK,UAAUmB,YAAYrB;QAAY,GAAGI,IAAI;OAC1CkB,cAAcF;AAG3B"}

package/TimeAgo/TimeAgo.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimeAgo } from "./TimeAgo.js";
+declare const meta: Meta<typeof TimeAgo>;
+export default meta;
+type Story = StoryObj<typeof TimeAgo>;
+export declare const JustNow: Story;
+export declare const SecondsAgo: Story;
+export declare const MinutesAgo: Story;
+export declare const HoursAgo: Story;
+export declare const DaysAgo: Story;
+export declare const WeeksAgo: Story;
+export declare const MonthsAgo: Story;
+export declare const YearsAgo: Story;
+export declare const ISOString: Story;
+export declare const NotLive: Story;

package/TimeAgo/TimeAgo.stories.js

@@ -0,0 +1,71 @@
+import "react";
+import { TimeAgo } from "./TimeAgo.js";
+const meta = {
+    title: "Components/TimeAgo",
+    component: TimeAgo
+};
+const TimeAgo_stories = meta;
+const JustNow = {
+    args: {
+        datetime: new Date()
+    }
+};
+const SecondsAgo = {
+    name: "Seconds ago",
+    args: {
+        datetime: new Date(Date.now() - 45000)
+    }
+};
+const MinutesAgo = {
+    name: "Minutes ago",
+    args: {
+        datetime: new Date(Date.now() - 900000)
+    }
+};
+const HoursAgo = {
+    name: "Hours ago",
+    args: {
+        datetime: new Date(Date.now() - 10800000)
+    }
+};
+const DaysAgo = {
+    name: "Days ago",
+    args: {
+        datetime: new Date(Date.now() - 432000000)
+    }
+};
+const WeeksAgo = {
+    name: "Weeks ago",
+    args: {
+        datetime: new Date(Date.now() - 1814400000)
+    }
+};
+const MonthsAgo = {
+    name: "Months ago",
+    args: {
+        datetime: new Date(Date.now() - 10368000000)
+    }
+};
+const YearsAgo = {
+    name: "Years ago",
+    args: {
+        datetime: new Date(Date.now() - 63072000000)
+    }
+};
+const ISOString = {
+    name: "From ISO string",
+    args: {
+        datetime: "2024-01-15T12:00:00Z"
+    }
+};
+const NotLive = {
+    name: "Live updates disabled",
+    args: {
+        datetime: new Date(),
+        live: false
+    }
+};
+export default TimeAgo_stories;
+export { DaysAgo, HoursAgo, ISOString, JustNow, MinutesAgo, MonthsAgo, NotLive, SecondsAgo, WeeksAgo, YearsAgo };
+
+//# sourceMappingURL=TimeAgo.stories.js.map

package/TimeAgo/TimeAgo.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/TimeAgo.stories.js","sources":["../../src/TimeAgo/TimeAgo.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { TimeAgo } from \"./TimeAgo.js\";\n\nconst meta: Meta<typeof TimeAgo> = {\n    title: \"Components/TimeAgo\",\n    component: TimeAgo\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof TimeAgo>;\n\nexport const JustNow: Story = {\n    args: {\n        datetime: new Date()\n    }\n};\n\nexport const SecondsAgo: Story = {\n    name: \"Seconds ago\",\n    args: {\n        datetime: new Date(Date.now() - 45 * 1000)\n    }\n};\n\nexport const MinutesAgo: Story = {\n    name: \"Minutes ago\",\n    args: {\n        datetime: new Date(Date.now() - 15 * 60 * 1000)\n    }\n};\n\nexport const HoursAgo: Story = {\n    name: \"Hours ago\",\n    args: {\n        datetime: new Date(Date.now() - 3 * 60 * 60 * 1000)\n    }\n};\n\nexport const DaysAgo: Story = {\n    name: \"Days ago\",\n    args: {\n        datetime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const WeeksAgo: Story = {\n    name: \"Weeks ago\",\n    args: {\n        datetime: new Date(Date.now() - 3 * 7 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const MonthsAgo: Story = {\n    name: \"Months ago\",\n    args: {\n        datetime: new Date(Date.now() - 4 * 30 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const YearsAgo: Story = {\n    name: \"Years ago\",\n    args: {\n        datetime: new Date(Date.now() - 2 * 365 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const ISOString: Story = {\n    name: \"From ISO string\",\n    args: {\n        datetime: \"2024-01-15T12:00:00Z\"\n    }\n};\n\nexport const NotLive: Story = {\n    name: \"Live updates disabled\",\n    args: {\n        datetime: new Date(),\n        live: false\n    }\n};\n"],"names":["meta","TimeAgo","JustNow","Date","SecondsAgo","MinutesAgo","HoursAgo","DaysAgo","WeeksAgo","MonthsAgo","YearsAgo","ISOString","NotLive"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;AACf;AAEA,wBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,UAAU,IAAIC;IAClB;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;IACN,MAAM;QACF,UAAU,IAAID,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAME,aAAoB;IAC7B,MAAM;IACN,MAAM;QACF,UAAU,IAAIF,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;IACN,MAAM;QACF,UAAU,IAAIH,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMI,UAAiB;IAC1B,MAAM;IACN,MAAM;QACF,UAAU,IAAIJ,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;IACN,MAAM;QACF,UAAU,IAAIL,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMM,YAAmB;IAC5B,MAAM;IACN,MAAM;QACF,UAAU,IAAIN,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMO,WAAkB;IAC3B,MAAM;IACN,MAAM;QACF,UAAU,IAAIP,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;IACN,MAAM;QACF,UAAU;IACd;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;IACN,MAAM;QACF,UAAU,IAAIT;QACd,MAAM;IACV;AACJ"}

package/TimeAgo/formatElapsed.d.ts

@@ -0,0 +1 @@
+export declare function formatElapsed(seconds: number): string;

package/TimeAgo/formatElapsed.js

@@ -0,0 +1,27 @@
+const MINUTE = 60;
+const HOUR = 3600;
+const DAY = 86400;
+const WEEK = 604800;
+const MONTH = 2592000;
+const YEAR = 31536000;
+function formatElapsed(seconds) {
+    const abs = Math.abs(seconds);
+    const suffix = seconds < 0 ? "from now" : "ago";
+    if (abs < 30) return "just now";
+    if (abs < MINUTE) return `${abs} seconds ${suffix}`;
+    if (abs < 2 * MINUTE) return `1 minute ${suffix}`;
+    if (abs < HOUR) return `${Math.floor(abs / MINUTE)} minutes ${suffix}`;
+    if (abs < 2 * HOUR) return `1 hour ${suffix}`;
+    if (abs < DAY) return `${Math.floor(abs / HOUR)} hours ${suffix}`;
+    if (abs < 2 * DAY) return `1 day ${suffix}`;
+    if (abs < WEEK) return `${Math.floor(abs / DAY)} days ${suffix}`;
+    if (abs < 2 * WEEK) return `1 week ${suffix}`;
+    if (abs < MONTH) return `${Math.floor(abs / WEEK)} weeks ${suffix}`;
+    if (abs < 2 * MONTH) return `1 month ${suffix}`;
+    if (abs < YEAR) return `${Math.floor(abs / MONTH)} months ${suffix}`;
+    if (abs < 2 * YEAR) return `1 year ${suffix}`;
+    return `${Math.floor(abs / YEAR)} years ${suffix}`;
+}
+export { formatElapsed };
+
+//# sourceMappingURL=formatElapsed.js.map

package/TimeAgo/formatElapsed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/formatElapsed.js","sources":["../../src/TimeAgo/formatElapsed.ts"],"sourcesContent":["const MINUTE = 60;\nconst HOUR = 3600;\nconst DAY = 86400;\nconst WEEK = 604800;\nconst MONTH = 2_592_000;\nconst YEAR = 31_536_000;\n\nexport function formatElapsed(seconds: number): string {\n    const abs = Math.abs(seconds);\n    const suffix = seconds < 0 ? \"from now\" : \"ago\";\n\n    if (abs < 30) {\n        return \"just now\";\n    }\n    if (abs < MINUTE) {\n        return `${abs} seconds ${suffix}`;\n    }\n    if (abs < 2 * MINUTE) {\n        return `1 minute ${suffix}`;\n    }\n    if (abs < HOUR) {\n        return `${Math.floor(abs / MINUTE)} minutes ${suffix}`;\n    }\n    if (abs < 2 * HOUR) {\n        return `1 hour ${suffix}`;\n    }\n    if (abs < DAY) {\n        return `${Math.floor(abs / HOUR)} hours ${suffix}`;\n    }\n    if (abs < 2 * DAY) {\n        return `1 day ${suffix}`;\n    }\n    if (abs < WEEK) {\n        return `${Math.floor(abs / DAY)} days ${suffix}`;\n    }\n    if (abs < 2 * WEEK) {\n        return `1 week ${suffix}`;\n    }\n    if (abs < MONTH) {\n        return `${Math.floor(abs / WEEK)} weeks ${suffix}`;\n    }\n    if (abs < 2 * MONTH) {\n        return `1 month ${suffix}`;\n    }\n    if (abs < YEAR) {\n        return `${Math.floor(abs / MONTH)} months ${suffix}`;\n    }\n    if (abs < 2 * YEAR) {\n        return `1 year ${suffix}`;\n    }\n    return `${Math.floor(abs / YEAR)} years ${suffix}`;\n}\n"],"names":["MINUTE","HOUR","DAY","WEEK","MONTH","YEAR","formatElapsed","seconds","abs","Math","suffix"],"mappings":"AAAA,MAAMA,SAAS;AACf,MAAMC,OAAO;AACb,MAAMC,MAAM;AACZ,MAAMC,OAAO;AACb,MAAMC,QAAQ;AACd,MAAMC,OAAO;AAEN,SAASC,cAAcC,OAAe;IACzC,MAAMC,MAAMC,KAAK,GAAG,CAACF;IACrB,MAAMG,SAASH,UAAU,IAAI,aAAa;IAE1C,IAAIC,MAAM,IACN,OAAO;IAEX,IAAIA,MAAMR,QACN,OAAO,GAAGQ,IAAI,SAAS,EAAEE,QAAQ;IAErC,IAAIF,MAAM,IAAIR,QACV,OAAO,CAAC,SAAS,EAAEU,QAAQ;IAE/B,IAAIF,MAAMP,MACN,OAAO,GAAGQ,KAAK,KAAK,CAACD,MAAMR,QAAQ,SAAS,EAAEU,QAAQ;IAE1D,IAAIF,MAAM,IAAIP,MACV,OAAO,CAAC,OAAO,EAAES,QAAQ;IAE7B,IAAIF,MAAMN,KACN,OAAO,GAAGO,KAAK,KAAK,CAACD,MAAMP,MAAM,OAAO,EAAES,QAAQ;IAEtD,IAAIF,MAAM,IAAIN,KACV,OAAO,CAAC,MAAM,EAAEQ,QAAQ;IAE5B,IAAIF,MAAML,MACN,OAAO,GAAGM,KAAK,KAAK,CAACD,MAAMN,KAAK,MAAM,EAAEQ,QAAQ;IAEpD,IAAIF,MAAM,IAAIL,MACV,OAAO,CAAC,OAAO,EAAEO,QAAQ;IAE7B,IAAIF,MAAMJ,OACN,OAAO,GAAGK,KAAK,KAAK,CAACD,MAAML,MAAM,OAAO,EAAEO,QAAQ;IAEtD,IAAIF,MAAM,IAAIJ,OACV,OAAO,CAAC,QAAQ,EAAEM,QAAQ;IAE9B,IAAIF,MAAMH,MACN,OAAO,GAAGI,KAAK,KAAK,CAACD,MAAMJ,OAAO,QAAQ,EAAEM,QAAQ;IAExD,IAAIF,MAAM,IAAIH,MACV,OAAO,CAAC,OAAO,EAAEK,QAAQ;IAE7B,OAAO,GAAGD,KAAK,KAAK,CAACD,MAAMH,MAAM,OAAO,EAAEK,QAAQ;AACtD"}

package/TimeAgo/getElapsedSeconds.d.ts

@@ -0,0 +1,2 @@
+import type { TDate } from "./types.js";
+export declare function getElapsedSeconds(datetime: TDate, relativeDate?: TDate): number;

package/TimeAgo/getElapsedSeconds.js

@@ -0,0 +1,9 @@
+import { toEpochMs } from "./toEpochMs.js";
+function getElapsedSeconds(datetime, relativeDate) {
+    const nowMs = relativeDate ? toEpochMs(relativeDate) : Date.now();
+    const pastMs = toEpochMs(datetime);
+    return Math.round((nowMs - pastMs) / 1000);
+}
+export { getElapsedSeconds };
+
+//# sourceMappingURL=getElapsedSeconds.js.map

package/TimeAgo/getElapsedSeconds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/getElapsedSeconds.js","sources":["../../src/TimeAgo/getElapsedSeconds.ts"],"sourcesContent":["import type { TDate } from \"./types.js\";\nimport { toEpochMs } from \"./toEpochMs.js\";\n\nexport function getElapsedSeconds(datetime: TDate, relativeDate?: TDate): number {\n    const nowMs = relativeDate ? toEpochMs(relativeDate) : Date.now();\n    const pastMs = toEpochMs(datetime);\n    return Math.round((nowMs - pastMs) / 1000);\n}\n"],"names":["getElapsedSeconds","datetime","relativeDate","nowMs","toEpochMs","Date","pastMs","Math"],"mappings":";AAGO,SAASA,kBAAkBC,QAAe,EAAEC,YAAoB;IACnE,MAAMC,QAAQD,eAAeE,UAAUF,gBAAgBG,KAAK,GAAG;IAC/D,MAAMC,SAASF,UAAUH;IACzB,OAAOM,KAAK,KAAK,CAAEJ,AAAAA,CAAAA,QAAQG,MAAK,IAAK;AACzC"}

package/TimeAgo/getUpdateDelay.d.ts

@@ -0,0 +1,3 @@
+import type { UpdateIntervals } from "./types.js";
+export declare const DEFAULT_INTERVALS: Required<UpdateIntervals>;
+export declare function getUpdateDelay(seconds: number, minInterval?: number, intervals?: Required<UpdateIntervals>): number | null;

package/TimeAgo/getUpdateDelay.js

@@ -0,0 +1,24 @@
+const MINUTE = 60;
+const HOUR = 3600;
+const FIVE_MINUTES = 5 * MINUTE;
+const FIFTEEN_MINUTES = 15 * MINUTE;
+const DEFAULT_INTERVALS = {
+    underFiveMinutes: 1000,
+    underFifteenMinutes: 10000,
+    underOneHour: 30000
+};
+function getUpdateDelay(seconds, minInterval, intervals = DEFAULT_INTERVALS) {
+    const abs = Math.abs(seconds);
+    let delay;
+    if (abs < FIVE_MINUTES) delay = intervals.underFiveMinutes;
+    else if (abs < FIFTEEN_MINUTES) delay = intervals.underFifteenMinutes;
+    else {
+        if (!(abs < HOUR)) return null;
+        delay = intervals.underOneHour;
+    }
+    if (minInterval) delay = Math.max(delay, 1000 * minInterval);
+    return delay;
+}
+export { DEFAULT_INTERVALS, getUpdateDelay };
+
+//# sourceMappingURL=getUpdateDelay.js.map

package/TimeAgo/getUpdateDelay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/getUpdateDelay.js","sources":["../../src/TimeAgo/getUpdateDelay.ts"],"sourcesContent":["import type { UpdateIntervals } from \"./types.js\";\n\nconst MINUTE = 60;\nconst HOUR = 3600;\nconst FIVE_MINUTES = 5 * MINUTE;\nconst FIFTEEN_MINUTES = 15 * MINUTE;\n\nexport const DEFAULT_INTERVALS: Required<UpdateIntervals> = {\n    underFiveMinutes: 1_000,\n    underFifteenMinutes: 10_000,\n    underOneHour: 30_000\n};\n\nexport function getUpdateDelay(\n    seconds: number,\n    minInterval?: number,\n    intervals: Required<UpdateIntervals> = DEFAULT_INTERVALS\n): number | null {\n    const abs = Math.abs(seconds);\n    let delay: number;\n\n    if (abs < FIVE_MINUTES) {\n        delay = intervals.underFiveMinutes;\n    } else if (abs < FIFTEEN_MINUTES) {\n        delay = intervals.underFifteenMinutes;\n    } else if (abs < HOUR) {\n        delay = intervals.underOneHour;\n    } else {\n        return null;\n    }\n\n    if (minInterval) {\n        delay = Math.max(delay, minInterval * 1000);\n    }\n\n    return delay;\n}\n"],"names":["MINUTE","HOUR","FIVE_MINUTES","FIFTEEN_MINUTES","DEFAULT_INTERVALS","getUpdateDelay","seconds","minInterval","intervals","abs","Math","delay"],"mappings":"AAEA,MAAMA,SAAS;AACf,MAAMC,OAAO;AACb,MAAMC,eAAe,IAAIF;AACzB,MAAMG,kBAAkB,KAAKH;AAEtB,MAAMI,oBAA+C;IACxD,kBAAkB;IAClB,qBAAqB;IACrB,cAAc;AAClB;AAEO,SAASC,eACZC,OAAe,EACfC,WAAoB,EACpBC,YAAuCJ,iBAAiB;IAExD,MAAMK,MAAMC,KAAK,GAAG,CAACJ;IACrB,IAAIK;IAEJ,IAAIF,MAAMP,cACNS,QAAQH,UAAU,gBAAgB;SAC/B,IAAIC,MAAMN,iBACbQ,QAAQH,UAAU,mBAAmB;;QAClC,KAAIC,CAAAA,MAAMR,IAAG,GAGhB,OAAO;QAFPU,QAAQH,UAAU,YAAY;;IAKlC,IAAID,aACAI,QAAQD,KAAK,GAAG,CAACC,OAAOJ,AAAc,OAAdA;IAG5B,OAAOI;AACX"}

package/TimeAgo/index.d.ts

@@ -1,3 +1,2 @@
-import TimeAgo from "timeago-react";
-export type { TimeAgoProps, Opts, TDate } from "timeago-react";
-export { TimeAgo };
+export type { TimeAgoProps, Opts, TDate, UpdateIntervals } from "./types.js";
+export { TimeAgo } from "./TimeAgo.js";