@delightstack/components 0.1.0

package/dist/actions/Button.svelte.d.ts

@@ -0,0 +1,56 @@
+import { type Snippet } from 'svelte';
+import { type PopoverPlacement, type PopoverStrategy } from './Popover.svelte';
+declare const Button: import("svelte").Component<{
+    size?: undefined | "0000" | "000" | "00" | "0" | "1" | "2" | "3" | "4" | "5" | "6";
+    icon?: boolean;
+    pill?: boolean;
+    transparent?: boolean;
+    translucent?: boolean;
+    outline?: boolean;
+    grouped?: boolean;
+    error?: boolean;
+    success?: boolean;
+    overlay?: boolean;
+    accent?: boolean;
+    dense?: boolean;
+    comfortable?: boolean;
+    full_width?: boolean;
+    full_height?: boolean;
+    disable_ripple?: boolean;
+    href?: string | undefined;
+    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+    type?: "button" | "submit" | "reset";
+    tooltip?: string;
+    disabled?: boolean;
+    active?: boolean;
+    loading?: boolean | undefined;
+    loading_success?: boolean;
+    badge?: string | undefined | boolean;
+    menu?: undefined | Snippet<[{
+        close: () => void;
+    }]>;
+    show_chevron?: boolean;
+    dropdown?: undefined | Snippet<[{
+        close: () => void;
+    }]>;
+    loading_content?: undefined | Snippet<[{
+        close: () => void;
+    }]>;
+    disable_dropdown?: boolean;
+    popover_close_on_inside_click?: boolean;
+    popover_placement?: PopoverPlacement;
+    popover_strategy?: PopoverStrategy;
+    popover_disable_initial_focus?: boolean;
+    children?: undefined | Snippet<[{
+        isLoading: boolean;
+        isLoadingSuccess: boolean;
+    }]>;
+    id?: string;
+    button_element?: HTMLElement | undefined;
+    class?: string;
+    style?: string;
+    onclick?: undefined | ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<void>);
+} & Record<string, any>, {}, "button_element">;
+type Button = ReturnType<typeof Button>;
+export default Button;
+//# sourceMappingURL=Button.svelte.d.ts.map

package/dist/actions/Button.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/Button.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGlD,OAAgB,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAoexF,QAAA,MAAM,MAAM;WAncsE,SAAS,GACtF,MAAM,GACN,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG;WAAS,OAAO;WAAS,OAAO;kBAAgB,OAAO;kBAAgB,OAAO;cAAY,OAAO;cAAY,OAAO;YAAU,OAAO;cAAY,OAAO;cAAY,OAAO;aAAW,OAAO;YAAU,OAAO;kBAAgB,OAAO;iBAAe,OAAO;kBAAgB,OAAO;qBAAmB,OAAO;WAAS,MAAM,GAAG,SAAS;aAAW,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;WAAS,QAAQ,GAAG,QAAQ,GAAG,OAAO;cAAY,MAAM;eAAa,OAAO;aAAW,OAAO;cAAY,OAAO,GAAG,SAAS;sBAAoB,OAAO;YAAU,MAAM,GAAG,SAAS,GAAG,OAAO;WAAS,SAAS,GAAG,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;mBAAiB,OAAO;eAAa,SAAS,GAAG,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;sBAAoB,SAAS,GAAG,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;uBAAqB,OAAO;oCAAkC,OAAO;wBAAsB,gBAAgB;uBAAqB,eAAe;oCAAkC,OAAO;eAAe,SAAS,GAC59B,OAAO,CAAC,CAAC;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;;qBAAuC,WAAW,GAAG,SAAS;YAAU,MAAM;YAAU,MAAM;cAAc,SAAS,GACjL,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GACzB,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;8CAsba,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/actions/ButtonGroup.svelte

@@ -0,0 +1,111 @@
+<script module lang="ts">
+	export interface ButtonGroupContext {
+		/** The font size applied to all buttons in the group */
+		size: undefined | '0000' | '000' | '00' | '0' | '1' | '2' | '3' | '4' | '5' | '6';
+		/** Whether all buttons in the group use the outline style */
+		outline: boolean;
+		/** Whether all buttons in the group have a transparent background */
+		transparent: boolean;
+		/** Whether all buttons in the group have a semi-transparent background */
+		translucent: boolean;
+		/** Whether all buttons in the group use the accent/primary color */
+		accent: boolean;
+		/** Whether all buttons in the group are styled as an error (danger) */
+		error: boolean;
+		/** Whether all buttons in the group are styled as success */
+		success: boolean;
+		/** Whether all buttons in the group are disabled */
+		disabled: boolean;
+		/** The layout direction of the group */
+		orientation: 'horizontal' | 'vertical';
+		/** Whether the buttons are visually attached (merged borders, no gap) */
+		attached: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { setContext, type Snippet } from 'svelte';
+
+	const propId = $props.id();
+	let {
+		/** The size applied to all child buttons */
+		size = undefined as ButtonGroupContext['size'],
+
+		/** Whether all child buttons should have an outline style */
+		outline = false,
+
+		/** Whether all child buttons should have a transparent background */
+		transparent = false,
+
+		/** Whether all child buttons should have a translucent background */
+		translucent = false,
+
+		/** Whether all child buttons should use the accent color */
+		accent = false,
+
+		/** Whether all child buttons should use the error color */
+		error = false,
+
+		/** Whether all child buttons should use the success color */
+		success = false,
+
+		/** The orientation of the button group */
+		orientation = 'horizontal' as 'horizontal' | 'vertical',
+
+		/** Whether all child buttons should be disabled */
+		disabled = false,
+
+		/** Whether child buttons should have merged borders (no gap between them) */
+		attached = true,
+
+		/** The ID of the element. @defaults to a random ID */
+		id = propId,
+
+		/** Specifies a custom class name for the container element */
+		class: class_name = '',
+
+		/** The child elements to display inside the group */
+		children = undefined as undefined | Snippet,
+	} = $props();
+
+	const context = $state<ButtonGroupContext>({
+		size,
+		outline,
+		transparent,
+		translucent,
+		accent,
+		error,
+		success,
+		disabled,
+		orientation,
+		attached,
+	});
+	setContext<ButtonGroupContext>('button-group', context);
+
+	$effect(() => {
+		context.size = size;
+		context.outline = outline;
+		context.transparent = transparent;
+		context.translucent = translucent;
+		context.accent = accent;
+		context.error = error;
+		context.success = success;
+		context.disabled = disabled;
+		context.orientation = orientation;
+		context.attached = attached;
+	});
+</script>
+
+<div
+	{id}
+	class={['button-group', class_name].filter(Boolean).join(' ')}
+	class:vertical={orientation === 'vertical'}
+	class:horizontal={orientation === 'horizontal'}
+	class:attached
+	role="group"
+	style:display="inline-flex"
+	style:align-items="stretch"
+	style:flex-direction={orientation === 'vertical' ? 'column' : 'row'}
+	style:gap={attached ? null : '0.25em'}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/actions/ButtonGroup.svelte.d.ts

@@ -0,0 +1,41 @@
+export interface ButtonGroupContext {
+    /** The font size applied to all buttons in the group */
+    size: undefined | '0000' | '000' | '00' | '0' | '1' | '2' | '3' | '4' | '5' | '6';
+    /** Whether all buttons in the group use the outline style */
+    outline: boolean;
+    /** Whether all buttons in the group have a transparent background */
+    transparent: boolean;
+    /** Whether all buttons in the group have a semi-transparent background */
+    translucent: boolean;
+    /** Whether all buttons in the group use the accent/primary color */
+    accent: boolean;
+    /** Whether all buttons in the group are styled as an error (danger) */
+    error: boolean;
+    /** Whether all buttons in the group are styled as success */
+    success: boolean;
+    /** Whether all buttons in the group are disabled */
+    disabled: boolean;
+    /** The layout direction of the group */
+    orientation: 'horizontal' | 'vertical';
+    /** Whether the buttons are visually attached (merged borders, no gap) */
+    attached: boolean;
+}
+import { type Snippet } from 'svelte';
+declare const ButtonGroup: import("svelte").Component<{
+    size?: ButtonGroupContext["size"];
+    outline?: boolean;
+    transparent?: boolean;
+    translucent?: boolean;
+    accent?: boolean;
+    error?: boolean;
+    success?: boolean;
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+    attached?: boolean;
+    id?: string;
+    class?: string;
+    children?: undefined | Snippet;
+}, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.svelte.d.ts.map

package/dist/actions/ButtonGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/ButtonGroup.svelte.ts"],"names":[],"mappings":"AAGC,MAAM,WAAW,kBAAkB;IAClC,wDAAwD;IACxD,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAClF,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,WAAW,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,WAAW,EAAE,OAAO,CAAC;IACrB,oEAAoE;IACpE,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,KAAK,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,QAAQ,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,yEAAyE;IACzE,QAAQ,EAAE,OAAO,CAAC;CAClB;AAGF,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAmFlD,QAAA,MAAM,WAAW;WA9E+D,kBAAkB,CAAC,MAAM,CAAC;cAAY,OAAO;kBAAgB,OAAO;kBAAgB,OAAO;aAAW,OAAO;YAAU,OAAO;cAAY,OAAO;kBAAgB,YAAY,GAAG,UAAU;eAAa,OAAO;eAAa,OAAO;;YAA8B,MAAM;eAAa,SAAS,GAAG,OAAO;UA8E7T,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}