@wireapp/react-ui-kit 9.32.0 → 9.33.0

package/lib/Form/InputBlock.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithSubmitCombo = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Input_1 = require("./Input");
+const InputBlock_1 = require("./InputBlock");
+const InputSubmitCombo_1 = require("./InputSubmitCombo");
+const RoundIconButton_1 = require("./RoundIconButton");
+const Icon_1 = require("../Icon");
+const meta = {
+    title: 'Form/InputBlock',
+    component: InputBlock_1.InputBlock,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputBlock_1.InputBlock, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "First input" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Second input" })] })),
+};
+exports.WithSubmitCombo = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputBlock_1.InputBlock, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Regular input" }), (0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Input with submit" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })] })),
+};
+exports.Invalid = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputBlock_1.InputBlock, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Invalid input", markInvalid: true }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Another invalid input", markInvalid: true })] })),
+};

package/lib/Form/InputLabel.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./InputLabel").InputLabelProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithInput: Story;
+export declare const Invalid: Story;
+//# sourceMappingURL=InputLabel.stories.d.ts.map

package/lib/Form/InputLabel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.stories.d.ts","sourceRoot":"","sources":["../../src/Form/InputLabel.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAKrD,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/lib/Form/InputLabel.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithInput = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Input_1 = require("./Input");
+const InputLabel_1 = require("./InputLabel");
+const meta = {
+    title: 'Form/InputLabel',
+    component: InputLabel_1.InputLabel,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Label Text',
+    },
+};
+exports.WithInput = {
+    args: {
+        children: 'Email address',
+        htmlFor: 'example-input',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Story, {}), (0, jsx_runtime_1.jsx)(Input_1.Input, { id: "example-input", type: "email", placeholder: "Enter email" })] })),
+    ],
+};
+exports.Invalid = {
+    args: {
+        children: 'Invalid Label',
+        markInvalid: true,
+    },
+};

package/lib/Form/InputSubmitCombo.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, ...props }: import("./InputSubmitCombo").InputSubmitComboProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithMultipleButtons: Story;
+export declare const Invalid: Story;
+//# sourceMappingURL=InputSubmitCombo.stories.d.ts.map

package/lib/Form/InputSubmitCombo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSubmitCombo.stories.d.ts","sourceRoot":"","sources":["../../src/Form/InputSubmitCombo.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAQrD,QAAA,MAAM,IAAI;;;;;;;CAO+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/lib/Form/InputSubmitCombo.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithMultipleButtons = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Input_1 = require("./Input");
+const InputSubmitCombo_1 = require("./InputSubmitCombo");
+const RoundIconButton_1 = require("./RoundIconButton");
+const Icon_1 = require("../Icon");
+const meta = {
+    title: 'Form/InputSubmitCombo',
+    component: InputSubmitCombo_1.InputSubmitCombo,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type a message...", name: "message" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};
+exports.WithMultipleButtons = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type a message...", name: "message" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.AttachmentIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};
+exports.Invalid = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { markInvalid: true, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Invalid input", name: "message", markInvalid: true }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};

package/lib/Form/RangeInput.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./RangeInput").RangeInputProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithSteps: Story;
+export declare const Disabled: Story;
+export declare const CustomRange: Story;
+//# sourceMappingURL=RangeInput.stories.d.ts.map

package/lib/Form/RangeInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.stories.d.ts","sourceRoot":"","sources":["../../src/Form/RangeInput.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}

package/lib/Form/RangeInput.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomRange = exports.Disabled = exports.WithSteps = exports.Default = void 0;
+const RangeInput_1 = require("./RangeInput");
+const meta = {
+    title: 'Form/RangeInput',
+    component: RangeInput_1.RangeInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        defaultValue: 50,
+        min: 0,
+        max: 100,
+    },
+};
+exports.WithSteps = {
+    args: {
+        defaultValue: 5,
+        min: 0,
+        max: 10,
+        step: 1,
+    },
+};
+exports.Disabled = {
+    args: {
+        defaultValue: 50,
+        min: 0,
+        max: 100,
+        disabled: true,
+    },
+};
+exports.CustomRange = {
+    args: {
+        defaultValue: 0,
+        min: -50,
+        max: 50,
+        step: 10,
+    },
+};

package/lib/Form/RoundIconButton.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./RoundIconButton").RoundIconButtonProps<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const IconGallery: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=RoundIconButton.stories.d.ts.map

package/lib/Form/RoundIconButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundIconButton.stories.d.ts","sourceRoot":"","sources":["../../src/Form/RoundIconButton.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAoBrD,QAAA,MAAM,IAAI;;;;;;;CAO8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/lib/Form/RoundIconButton.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.IconGallery = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const RoundIconButton_1 = require("./RoundIconButton");
+const Icon_1 = require("../Icon");
+const Identity_1 = require("../Identity");
+const meta = {
+    title: 'Form/RoundIconButton',
+    component: RoundIconButton_1.RoundIconButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}),
+    },
+};
+exports.IconGallery = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.AttachmentIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.GifIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ImageIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.PingIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.PlaneIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ProfileIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TeamIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TimedIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TrashIcon, { color: Identity_1.COLOR.RED }) })] })),
+};
+exports.Disabled = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}),
+        disabled: true,
+    },
+};

package/lib/Form/Select.d.ts

@@ -8,7 +8,7 @@ export type Option = {
     description?: string;
     isDisabled?: boolean;
 };
-interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>> extends StateManagerProps<Option, IsMulti, Group> {
+export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>> extends StateManagerProps<Option, IsMulti, Group> {
     id: string;
     disabled?: boolean;
     dataUieName: string;
@@ -26,5 +26,4 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
     menuListHeading?: string;
 }
 export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Select.d.ts.map

package/lib/Form/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAkBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CAC5E,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,mMAiBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAqE7B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAkBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,mMAiBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAqE7B,CAAC"}

package/lib/Form/Select.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=Select.stories.d.ts.map

package/lib/Form/Select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAWrD,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/lib/Form/Select.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Invalid = exports.WithLabel = exports.Default = void 0;
+const Select_1 = require("./Select");
+const options = [
+    { value: '', label: 'Select an option' },
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+];
+const meta = {
+    title: 'Form/Select',
+    component: Select_1.Select,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        id: 'default-select',
+        dataUieName: 'default-select',
+        options,
+    },
+};
+exports.WithLabel = {
+    args: {
+        id: 'select-example',
+        dataUieName: 'select-with-label',
+        options,
+        label: 'Choose an option',
+    },
+};
+exports.Invalid = {
+    args: {
+        id: 'invalid-select',
+        dataUieName: 'invalid-select',
+        options,
+        markInvalid: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        id: 'disabled-select',
+        dataUieName: 'disabled-select',
+        options,
+        disabled: true,
+    },
+};

package/lib/Form/ShakeBox.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { ShakeBoxRef } from './ShakeBox';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./ShakeBox").ShakeBoxProps & import("react").RefAttributes<ShakeBoxRef>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithForm: Story;
+//# sourceMappingURL=ShakeBox.stories.d.ts.map

package/lib/Form/ShakeBox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShakeBox.stories.d.ts","sourceRoot":"","sources":["../../src/Form/ShakeBox.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,OAAO,EAAW,WAAW,EAAC,MAAM,YAAY,CAAC;AAEjD,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsBnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAsBF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/lib/Form/ShakeBox.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithForm = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const Input_1 = require("./Input");
+const ShakeBox_1 = require("./ShakeBox");
+const meta = {
+    title: 'Form/ShakeBox',
+    component: ShakeBox_1.ShakeBox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const DefaultStory = () => {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ShakeBox_1.ShakeBox, { ref: ref, children: (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type something..." }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => {
+                    ref.current?.shake();
+                }, style: { marginTop: '16px' }, children: "Shake Input" })] }));
+};
+exports.Default = {
+    render: () => (0, jsx_runtime_1.jsx)(DefaultStory, {}),
+};
+const FormStory = () => {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(ShakeBox_1.ShakeBox, { ref: ref, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: event => {
+                event.preventDefault();
+                ref.current?.shake();
+            }, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Required field", required: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", style: { marginTop: '16px' }, children: "Submit to shake" })] }) }));
+};
+exports.WithForm = {
+    render: () => (0, jsx_runtime_1.jsx)(FormStory, {}),
+};

package/lib/Form/Switch.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Switch").SwitchProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    render: ({ checked, disabled, ...args }: Omit<import("./Switch").SwitchProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+//# sourceMappingURL=Switch.stories.d.ts.map

package/lib/Form/Switch.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Switch.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAcrD,QAAA,MAAM,IAAI;;;;;;;;CAQqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC"}

package/lib/Form/Switch.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledChecked = exports.Disabled = exports.Checked = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const Switch_1 = require("./Switch");
+const DefaultStory = ({ checked, disabled }) => {
+    const [isChecked, setIsChecked] = (0, react_1.useState)(checked);
+    return (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: isChecked, disabled: disabled, onToggle: () => setIsChecked(!isChecked) });
+};
+const meta = {
+    title: 'Form/Switch',
+    component: Switch_1.Switch,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    render: ({ checked, disabled, ...args }) => (0, jsx_runtime_1.jsx)(DefaultStory, { ...args, checked: checked, disabled: disabled }),
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        checked: false,
+        disabled: false,
+        onToggle: () => { },
+    },
+};
+exports.Checked = {
+    args: {
+        checked: true,
+        disabled: false,
+        onToggle: () => { },
+    },
+};
+exports.Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+        onToggle: () => { },
+    },
+};
+exports.DisabledChecked = {
+    args: {
+        checked: true,
+        disabled: true,
+        onToggle: () => { },
+    },
+};

package/lib/Form/TextArea.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./TextArea").TextAreaProps<HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=TextArea.stories.d.ts.map

package/lib/Form/TextArea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../src/Form/TextArea.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAKrD,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/lib/Form/TextArea.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Invalid = exports.WithLabel = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const InputLabel_1 = require("./InputLabel");
+const TextArea_1 = require("./TextArea");
+const meta = {
+    title: 'Form/TextArea',
+    component: TextArea_1.TextArea,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        placeholder: 'Enter your message...',
+    },
+};
+exports.WithLabel = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: "textarea-example", children: "Message" }), (0, jsx_runtime_1.jsx)(TextArea_1.TextArea, { id: "textarea-example", placeholder: "Type your message here..." })] })),
+};
+exports.Invalid = {
+    args: {
+        placeholder: 'Invalid input...',
+        markInvalid: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        placeholder: 'Disabled textarea...',
+        disabled: true,
+    },
+};

package/lib/Form/Tooltip.d.ts

@@ -1,8 +1,7 @@
 import { HTMLProps, ReactNode } from 'react';
-interface TooltipProps<T = HTMLDivElement> extends HTMLProps<T> {
+export interface TooltipProps<T = HTMLDivElement> extends HTMLProps<T> {
     body: ReactNode;
     selector?: string;
 }
 export declare const Tooltip: ({ children, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/lib/Form/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAqJrF,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC7D,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAmCzD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAqJrF,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAmCzD,CAAC"}

package/lib/Form/Tooltip.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, ...props }: import("./Tooltip").TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithInput: Story;
+export declare const CustomPosition: Story;
+export declare const LongContent: Story;
+export declare const WithMarkup: Story;
+//# sourceMappingURL=Tooltip.stories.d.ts.map

package/lib/Form/Tooltip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;;;;;;CAOsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}