@gsk_poc/untitled-ui-base 0.1.1

package/components/base/select/select.story.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import * as Selects from "@/components/base/select/select.demo";
+
+export default {
+    title: "Base components/Select",
+};
+
+const DefaultDecorator = (Story: FC) => (
+    <div className="flex min-h-screen w-full bg-primary p-4">
+        <div className="w-80">
+            <Story />
+        </div>
+    </div>
+);
+
+const WiderDecorator = (Story: FC) => (
+    <div className="flex min-h-screen w-full bg-primary p-4">
+        <div className="w-100">
+            <Story />
+        </div>
+    </div>
+);
+
+export const Default = () => <Selects.Default />;
+Default.decorators = [DefaultDecorator];
+
+export const IconLeading = () => <Selects.IconLeading />;
+IconLeading.decorators = [DefaultDecorator];
+IconLeading.storyName = "Icon leading";
+
+export const AvatarLeading = () => <Selects.AvatarLeading />;
+AvatarLeading.decorators = [DefaultDecorator];
+AvatarLeading.storyName = "Avatar leading";
+
+export const DotLeading = () => <Selects.DotLeading />;
+DotLeading.decorators = [DefaultDecorator];
+DotLeading.storyName = "Dot leading";
+
+export const Search = () => <Selects.Search />;
+Search.decorators = [DefaultDecorator];
+
+export const Tags = () => <Selects.Tags />;
+Tags.decorators = [WiderDecorator];

package/components/base/slider/slider.demo.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Slider } from "@/components/base/slider/slider";
+
+export const Default = () => {
+    return <Slider defaultValue={[0, 25]} />;
+};
+
+export const BottomLabel = () => {
+    return <Slider defaultValue={[0, 25]} labelPosition="bottom" />;
+};
+
+export const TopFloating = () => {
+    return <Slider defaultValue={[0, 25]} labelPosition="top-floating" />;
+};
+
+export const SingleThumb = () => {
+    return <Slider defaultValue={50} labelPosition="top-floating" />;
+};

package/components/base/slider/slider.story.tsx

@@ -0,0 +1,26 @@
+import type { FC } from "react";
+import * as Sliders from "@/components/base/slider/slider.demo";
+
+export default {
+    title: "Base components/Sliders",
+    decorators: [
+        (Story: FC) => (
+            <div className="bg-primary p-16">
+                <div className="max-w-xs">
+                    <Story />
+                </div>
+            </div>
+        ),
+    ],
+};
+
+export const Default = () => <Sliders.Default />;
+
+export const BottomLabel = () => <Sliders.BottomLabel />;
+BottomLabel.storyName = "Bottom label";
+
+export const TopFloating = () => <Sliders.TopFloating />;
+TopFloating.storyName = "Top floating";
+
+export const SingleThumb = () => <Sliders.SingleThumb />;
+SingleThumb.storyName = "Single thumb";

package/components/base/tags/tags.demo.tsx

@@ -0,0 +1,341 @@
+"use client";
+
+import { useState } from "react";
+import type { Selection } from "react-aria-components";
+import { Tag, TagGroup, type TagItem, TagList } from "@/components/base/tags/tags";
+
+export const DefaultDemo = () => {
+    return (
+        <TagGroup label="Tags" size="md">
+            <TagList className="flex gap-4">
+                <Tag>Label</Tag>
+                <Tag avatarSrc="https://www.untitledui.com/images/flags/AU.svg">Label</Tag>
+                <Tag avatarSrc="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80">Label</Tag>
+                <Tag dot={true}>Label</Tag>
+            </TagList>
+        </TagGroup>
+    );
+};
+
+export const CloseXDemo = () => {
+    const [tags, setTags] = useState<TagItem[]>([
+        { id: "tag-01", label: "Label" },
+        { id: "tag-02", label: "Label", avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", dot: true },
+    ]);
+
+    return (
+        <TagGroup
+            label="Tags"
+            size="md"
+            onRemove={(keys) => {
+                setTags(tags.filter((tag) => !keys.has(tag.id)));
+            }}
+        >
+            <TagList className="flex flex-col items-start gap-4 md:flex-row" items={tags}>
+                {(item) => <Tag {...item}>{item.label}</Tag>}
+            </TagList>
+        </TagGroup>
+    );
+};
+
+export const CountDemo = () => {
+    return (
+        <TagGroup label="Tags" size="md">
+            <TagList className="flex flex-col items-start gap-4 md:flex-row">
+                <Tag count={5}>Label</Tag>
+                <Tag avatarSrc="https://www.untitledui.com/images/flags/AU.svg" count={5}>
+                    Label
+                </Tag>
+                <Tag avatarSrc="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" count={5}>
+                    Label
+                </Tag>
+                <Tag dot={true} count={5}>
+                    Label
+                </Tag>
+            </TagList>
+        </TagGroup>
+    );
+};
+
+export const CheckboxDemo = () => {
+    const [selectedTags, setSelectedTags] = useState<Selection>(new Set(["tag-01", "tag-02"]));
+
+    return (
+        <TagGroup label="Tags" size="md" selectionMode="multiple" selectedKeys={selectedTags} onSelectionChange={setSelectedTags}>
+            <TagList className="flex flex-col items-start gap-4 md:flex-row">
+                <Tag id="tag-01">Label</Tag>
+                <Tag id="tag-02" avatarSrc="https://www.untitledui.com/images/flags/AU.svg">
+                    Label
+                </Tag>
+                <Tag id="tag-03" avatarSrc="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80">
+                    Label
+                </Tag>
+                <Tag id="tag-04" dot={true}>
+                    Label
+                </Tag>
+            </TagList>
+        </TagGroup>
+    );
+};
+
+export const CheckboxCloseXDemo = () => {
+    const [selectedTags, setSelectedTags] = useState<Selection>(new Set(["tag-01", "tag-02"]));
+    const [tags, setTags] = useState<TagItem[]>([
+        { id: "tag-01", label: "Label" },
+        { id: "tag-02", label: "Label", avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", dot: true },
+    ]);
+
+    return (
+        <TagGroup
+            label="Tags"
+            size="md"
+            selectionMode="multiple"
+            selectedKeys={selectedTags}
+            onSelectionChange={setSelectedTags}
+            onRemove={(keys) => {
+                setTags(tags.filter((tag) => !keys.has(tag.id)));
+            }}
+        >
+            <TagList className="flex flex-col items-start gap-4 md:flex-row" items={tags}>
+                {(item) => <Tag {...item}>{item.label}</Tag>}
+            </TagList>
+        </TagGroup>
+    );
+};
+
+export const CheckboxCountDemo = () => {
+    const [selectedTags, setSelectedTags] = useState<Selection>(new Set(["tag-01", "tag-02"]));
+
+    return (
+        <TagGroup label="Tags" size="md" selectionMode="multiple" selectedKeys={selectedTags} onSelectionChange={setSelectedTags}>
+            <TagList className="flex flex-col items-start gap-4 md:flex-row">
+                <Tag id="tag-01" count={5}>
+                    Label
+                </Tag>
+                <Tag id="tag-02" avatarSrc="https://www.untitledui.com/images/flags/AU.svg" count={5}>
+                    Label
+                </Tag>
+                <Tag id="tag-03" avatarSrc="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" count={5}>
+                    Label
+                </Tag>
+                <Tag id="tag-04" dot={true} count={5}>
+                    Label
+                </Tag>
+            </TagList>
+        </TagGroup>
+    );
+};
+
+export const SizesDemo = () => {
+    return (
+        <div className="flex flex-col gap-4">
+            {/* Small */}
+            <TagGroup label="Tags" size="sm">
+                <TagList className="flex gap-4">
+                    <Tag>Label</Tag>
+                    <Tag avatarSrc="https://www.untitledui.com/images/flags/AU.svg">Label</Tag>
+                    <Tag avatarSrc="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80">Label</Tag>
+                    <Tag dot={true}>Label</Tag>
+                </TagList>
+            </TagGroup>
+
+            {/* Medium */}
+            <TagGroup label="Tags" size="md">
+                <TagList className="flex gap-4">
+                    <Tag>Label</Tag>
+                    <Tag avatarSrc="https://www.untitledui.com/images/flags/AU.svg">Label</Tag>
+                    <Tag avatarSrc="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80">Label</Tag>
+                    <Tag dot={true}>Label</Tag>
+                </TagList>
+            </TagGroup>
+
+            {/* Large */}
+            <TagGroup label="Tags" size="lg">
+                <TagList className="flex gap-4">
+                    <Tag>Label</Tag>
+                    <Tag avatarSrc="https://www.untitledui.com/images/flags/AU.svg">Label</Tag>
+                    <Tag avatarSrc="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80">Label</Tag>
+                    <Tag dot={true}>Label</Tag>
+                </TagList>
+            </TagGroup>
+        </div>
+    );
+};
+
+export const Default = () => {
+    const tags: TagItem[] = [
+        { id: "tag-01", label: "Label" },
+        { id: "tag-02", label: "Label", avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", dot: true },
+    ];
+
+    return (
+        <div className="flex flex-col gap-4">
+            <TagGroup label="Tags" size="sm">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" size="md">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" size="lg">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+        </div>
+    );
+};
+
+export const CloseX = () => {
+    const tags: TagItem[] = [
+        { id: "tag-01", label: "Label", onClose: () => {} },
+        { id: "tag-02", label: "Label", onClose: () => {}, avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", onClose: () => {}, avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", onClose: () => {}, dot: true },
+    ];
+
+    return (
+        <div className="flex flex-col gap-4">
+            <TagGroup label="Tags" size="sm">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" size="md">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" size="lg">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+        </div>
+    );
+};
+
+export const Count = () => {
+    const tags: TagItem[] = [
+        { id: "tag-01", label: "Label", count: 5 },
+        { id: "tag-02", label: "Label", count: 5, avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", count: 5, avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", count: 5, dot: true },
+    ];
+
+    return (
+        <div className="flex flex-col gap-4">
+            <TagGroup label="Tags" size="sm">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" size="md">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" size="lg">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+        </div>
+    );
+};
+
+export const CheckboxDefault = () => {
+    const tags: TagItem[] = [
+        { id: "tag-01", label: "Label" },
+        { id: "tag-02", label: "Label", avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", dot: true },
+    ];
+
+    return (
+        <div className="flex flex-col gap-4">
+            <TagGroup label="Tags" selectionMode="multiple" size="sm">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" selectionMode="multiple" size="md">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" selectionMode="multiple" size="lg">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+        </div>
+    );
+};
+
+export const CheckboxCloseX = () => {
+    const tags: TagItem[] = [
+        { id: "tag-01", label: "Label", onClose: () => {} },
+        { id: "tag-02", label: "Label", onClose: () => {}, avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", onClose: () => {}, avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", onClose: () => {}, dot: true },
+    ];
+
+    return (
+        <div className="flex flex-col gap-4">
+            <TagGroup label="Tags" selectionMode="multiple" size="sm">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" selectionMode="multiple" size="md">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" selectionMode="multiple" size="lg">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+        </div>
+    );
+};
+
+export const CheckboxCount = () => {
+    const tags: TagItem[] = [
+        { id: "tag-01", label: "Label", count: 5 },
+        { id: "tag-02", label: "Label", count: 5, avatarSrc: "https://www.untitledui.com/images/flags/AU.svg", avatarContrastBorder: false },
+        { id: "tag-03", label: "Label", count: 5, avatarSrc: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" },
+        { id: "tag-04", label: "Label", count: 5, dot: true },
+    ];
+
+    return (
+        <div className="flex flex-col gap-4">
+            <TagGroup label="Tags" selectionMode="multiple" size="sm">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" selectionMode="multiple" size="md">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+            <TagGroup label="Tags" selectionMode="multiple" size="lg">
+                <TagList className="flex gap-4" items={tags}>
+                    {(item) => <Tag {...item}>{item.label}</Tag>}
+                </TagList>
+            </TagGroup>
+        </div>
+    );
+};

package/components/base/tags/tags.story.tsx

@@ -0,0 +1,28 @@
+import type { FC } from "react";
+import * as Tags from "@/components/base/tags/tags.demo";
+
+export default {
+    title: "Base components/Tags",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full overflow-auto bg-primary p-4">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const Default = () => <Tags.Default />;
+
+export const CloseX = () => <Tags.CloseX />;
+
+export const Count = () => <Tags.Count />;
+
+export const CheckboxDefault = () => <Tags.CheckboxDefault />;
+CheckboxDefault.storyName = "Checkbox default";
+
+export const CheckboxCloseX = () => <Tags.CheckboxCloseX />;
+CheckboxCloseX.storyName = "Checkbox close X";
+
+export const CheckboxCount = () => <Tags.CheckboxCount />;
+CheckboxCount.storyName = "Checkbox count";

package/components/base/textarea/textarea.demo.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { TextArea } from "@/components/base/textarea/textarea";
+
+export const DefaultDemo = () => {
+    return <TextArea isRequired placeholder="This is a placeholder." label="Description" hint="This is a hint text to help user." rows={5} />;
+};
+
+export const DisabledDemo = () => {
+    return <TextArea isRequired isDisabled placeholder="This is a placeholder." label="Description" hint="This is a hint text to help user." rows={5} />;
+};
+
+export const InvalidDemo = () => {
+    return <TextArea isRequired isInvalid placeholder="This is a placeholder." label="Description" hint="This is an error message." rows={5} />;
+};
+
+export const Textarea = () => {
+    return (
+        <div className="flex w-full max-w-md flex-col gap-4">
+            <TextArea isRequired placeholder="This is a placeholder." label="Description" hint="This is a hint text to help user." rows={5} />
+            <TextArea isRequired isDisabled placeholder="This is a placeholder." label="Description" hint="This is a hint text to help user." rows={5} />
+            <TextArea isRequired isInvalid placeholder="This is a placeholder." label="Description" hint="This is an error message." rows={5} />
+        </div>
+    );
+};

package/components/base/textarea/textarea.story.tsx

@@ -0,0 +1,15 @@
+import type { FC } from "react";
+import * as TextAreas from "@/components/base/textarea/textarea.demo";
+
+export default {
+    title: "Base components/Inputs/Textarea",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full bg-primary p-4">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const Textarea = () => <TextAreas.Textarea />;

package/components/base/toggle/toggle.demo.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Toggle } from "@/components/base/toggle/toggle";
+
+export const DefaultDemo = () => <Toggle label="Remember me" hint="Save my login details for next time." size="sm" />;
+
+export const BaseDemo = () => <Toggle size="sm" />;
+
+export const WithLabelDemo = () => <Toggle label="Remember me" size="sm" />;
+
+export const WithLabelAndHintDemo = () => <Toggle label="Remember me" hint="Save my login details for next time." size="sm" />;
+
+export const DisabledDemo = () => <Toggle isDisabled label="Remember me" hint="Save my login details for next time." size="sm" />;
+
+export const SizesDemo = () => (
+    <div className="flex flex-col gap-8">
+        <Toggle label="Remember me" hint="Save my login details for next time." size="sm" />
+        <Toggle label="Remember me" hint="Save my login details for next time." size="md" />
+    </div>
+);
+
+export const SlimBaseDemo = () => <Toggle slim size="sm" />;
+
+export const SlimWithLabelAndHintDemo = () => <Toggle slim label="Remember me" hint="Save my login details for next time." size="sm" />;
+
+export const Toggles = () => (
+    <div className="grid grid-cols-2 gap-8">
+        <div className="flex flex-col gap-4">
+            <Toggle label="Remember me" hint="Save my login details for next time." size="sm" />
+            <Toggle isDisabled label="Remember me" hint="Save my login details for next time." size="sm" />
+        </div>
+        <div className="flex flex-col gap-4">
+            <Toggle label="Remember me" hint="Save my login details for next time." size="md" />
+            <Toggle isDisabled label="Remember me" hint="Save my login details for next time." size="md" />
+        </div>
+    </div>
+);
+
+export const ToggleBase = () => (
+    <div className="grid grid-cols-2 gap-8">
+        <div className="flex flex-col gap-4">
+            <Toggle size="sm" />
+            <Toggle isDisabled size="sm" />
+        </div>
+        <div className="flex flex-col gap-4">
+            <Toggle size="md" />
+            <Toggle isDisabled size="md" />
+        </div>
+    </div>
+);
+
+export const TogglesSlim = () => (
+    <div className="grid grid-cols-2 gap-8">
+        <div className="flex flex-col gap-4">
+            <Toggle slim label="Remember me" hint="Save my login details for next time." size="sm" />
+            <Toggle slim isDisabled label="Remember me" hint="Save my login details for next time." size="sm" />
+        </div>
+        <div className="flex flex-col gap-4">
+            <Toggle slim label="Remember me" hint="Save my login details for next time." size="md" />
+            <Toggle slim isDisabled label="Remember me" hint="Save my login details for next time." size="md" />
+        </div>
+    </div>
+);
+
+export const ToggleSlimBase = () => (
+    <div className="grid grid-cols-2 gap-8">
+        <div className="flex flex-col gap-4">
+            <Toggle slim size="sm" />
+            <Toggle slim isDisabled size="sm" />
+        </div>
+        <div className="flex flex-col gap-4">
+            <Toggle slim size="md" />
+            <Toggle slim isDisabled size="md" />
+        </div>
+    </div>
+);

package/components/base/toggle/toggle.story.tsx

@@ -0,0 +1,23 @@
+import type { FC } from "react";
+import * as ToggleComponents from "@/components/base/toggle/toggle.demo";
+
+export default {
+    title: "Base components/Toggles",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full bg-primary p-4">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const Toggles = () => <ToggleComponents.Toggles />;
+
+export const ToggleBase = () => <ToggleComponents.ToggleBase />;
+ToggleBase.storyName = "Toggle base";
+export const TogglesSlim = () => <ToggleComponents.TogglesSlim />;
+TogglesSlim.storyName = "Toggles slim";
+
+export const ToggleSlimBase = () => <ToggleComponents.ToggleSlimBase />;
+ToggleSlimBase.storyName = "Toggle slim base";