@r2digisolutions/components 0.1.1

package/dist/components/molecules/ButtonGroup/ButtonGroup.stories.d.ts

@@ -0,0 +1,33 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        attached?: boolean;
+        orientation?: "horizontal" | "vertical";
+        size?: "sm" | "md" | "lg";
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        attached: {
+            control: "boolean";
+        };
+        orientation: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        attached: true;
+        orientation: "horizontal";
+        size: "md";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Detached: Story;
+export declare const Vertical: Story;

package/dist/components/molecules/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,20 @@
+import ButtonGroupStory from './ButtonGroupStory.svelte';
+const meta = {
+    title: 'Molecules/ButtonGroup',
+    component: ButtonGroupStory,
+    tags: ['autodocs'],
+    argTypes: {
+        attached: { control: 'boolean' },
+        orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] }
+    },
+    args: {
+        attached: true,
+        orientation: 'horizontal',
+        size: 'md'
+    }
+};
+export default meta;
+export const Default = {};
+export const Detached = { args: { attached: false } };
+export const Vertical = { args: { orientation: 'vertical' } };

package/dist/components/molecules/ButtonGroup/ButtonGroup.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface ButtonGroupProps {
+		attached?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		children?: Snippet;
+		'aria-label'?: string;
+	}
+
+	let {
+		attached = true,
+		orientation = 'horizontal',
+		size = 'md',
+		class: className = '',
+		children,
+		'aria-label': ariaLabel = 'Button group'
+	}: ButtonGroupProps = $props();
+</script>
+
+<div
+	role="group"
+	aria-label={ariaLabel}
+	data-size={size}
+	data-attached={attached ? 'true' : 'false'}
+	data-orientation={orientation}
+	class={[
+		'button-group inline-flex',
+		orientation === 'vertical' ? 'flex-col' : 'flex-row',
+		attached && 'attached',
+		!attached && (orientation === 'vertical' ? 'gap-2' : 'gap-2'),
+		className
+	]}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.button-group.attached :global(> *) {
+		border-radius: 0;
+	}
+
+	.button-group.attached[data-orientation='horizontal'] :global(> *:first-child) {
+		border-top-left-radius: 0.5rem;
+		border-bottom-left-radius: 0.5rem;
+	}
+
+	.button-group.attached[data-orientation='horizontal'] :global(> *:last-child) {
+		border-top-right-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
+	}
+
+	.button-group.attached[data-orientation='vertical'] :global(> *:first-child) {
+		border-top-left-radius: 0.5rem;
+		border-top-right-radius: 0.5rem;
+	}
+
+	.button-group.attached[data-orientation='vertical'] :global(> *:last-child) {
+		border-bottom-left-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
+	}
+
+	.button-group.attached[data-orientation='horizontal'] :global(> *:not(:first-child)) {
+		margin-left: -1px;
+	}
+
+	.button-group.attached[data-orientation='vertical'] :global(> *:not(:first-child)) {
+		margin-top: -1px;
+	}
+</style>

package/dist/components/molecules/ButtonGroup/ButtonGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface ButtonGroupProps {
+    attached?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: Snippet;
+    'aria-label'?: string;
+}
+declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/molecules/ButtonGroup/ButtonGroupStory.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import ButtonGroup from './ButtonGroup.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+
+	let props = $props<{
+		attached?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		size?: 'sm' | 'md' | 'lg';
+	}>();
+</script>
+
+<ButtonGroup
+	attached={props.attached ?? true}
+	orientation={props.orientation ?? 'horizontal'}
+	size={props.size ?? 'md'}
+	aria-label="Text alignment"
+>
+	<Button variant="secondary" size={props.size ?? 'md'}>Left</Button>
+	<Button variant="secondary" size={props.size ?? 'md'}>Center</Button>
+	<Button variant="secondary" size={props.size ?? 'md'}>Right</Button>
+</ButtonGroup>

package/dist/components/molecules/ButtonGroup/ButtonGroupStory.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    attached?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const ButtonGroupStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonGroupStory = ReturnType<typeof ButtonGroupStory>;
+export default ButtonGroupStory;

package/dist/components/molecules/Calendar/Calendar.stories.d.ts

@@ -0,0 +1,57 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        mode?: import("./Calendar.svelte.ts").CalendarMode;
+        months?: 1 | 2;
+        showMinMax?: boolean;
+        showDisabledDates?: boolean;
+        showEnabledOnly?: boolean;
+        showDots?: boolean;
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        mode: {
+            control: "select";
+            options: string[];
+        };
+        months: {
+            control: "select";
+            options: number[];
+        };
+        showMinMax: {
+            control: "boolean";
+        };
+        showDisabledDates: {
+            control: "boolean";
+        };
+        showEnabledOnly: {
+            control: "boolean";
+        };
+        showDots: {
+            control: "boolean";
+        };
+    };
+    args: {
+        mode: "single";
+        months: 1;
+        showMinMax: false;
+        showDisabledDates: false;
+        showEnabledOnly: false;
+        showDots: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Single: Story;
+export declare const DualMonths: Story;
+export declare const Multiple: Story;
+export declare const Range: Story;
+export declare const RangeDual: Story;
+export declare const MinMax: Story;
+export declare const DisabledDates: Story;
+export declare const EnabledOnly: Story;
+export declare const WithDots: Story;
+export declare const RangeWithDots: Story;
+export declare const MultipleWithDisabled: Story;
+export declare const BookingExample: Story;

package/dist/components/molecules/Calendar/Calendar.stories.js

@@ -0,0 +1,68 @@
+import CalendarStory from './CalendarStory.svelte';
+const meta = {
+    title: 'Molecules/Calendar',
+    component: CalendarStory,
+    tags: ['autodocs'],
+    argTypes: {
+        mode: {
+            control: 'select',
+            options: ['single', 'multiple', 'range']
+        },
+        months: {
+            control: 'select',
+            options: [1, 2]
+        },
+        showMinMax: { control: 'boolean' },
+        showDisabledDates: { control: 'boolean' },
+        showEnabledOnly: { control: 'boolean' },
+        showDots: { control: 'boolean' }
+    },
+    args: {
+        mode: 'single',
+        months: 1,
+        showMinMax: false,
+        showDisabledDates: false,
+        showEnabledOnly: false,
+        showDots: false
+    }
+};
+export default meta;
+export const Single = {};
+export const DualMonths = {
+    name: 'Dual months',
+    args: { months: 2 }
+};
+export const Multiple = {
+    args: { mode: 'multiple' }
+};
+export const Range = {
+    args: { mode: 'range' }
+};
+export const RangeDual = {
+    name: 'Range · dual months',
+    args: { mode: 'range', months: 2 }
+};
+export const MinMax = {
+    name: 'Min / Max',
+    args: { showMinMax: true }
+};
+export const DisabledDates = {
+    args: { showDisabledDates: true }
+};
+export const EnabledOnly = {
+    name: 'Enabled dates only',
+    args: { showEnabledOnly: true }
+};
+export const WithDots = {
+    args: { showDots: true }
+};
+export const RangeWithDots = {
+    args: { mode: 'range', showDots: true }
+};
+export const MultipleWithDisabled = {
+    args: { mode: 'multiple', showDisabledDates: true, showDots: true }
+};
+export const BookingExample = {
+    name: 'Booking (range + dual)',
+    args: { mode: 'range', months: 2, showMinMax: true, showDots: true }
+};