@finsweet/webflow-apps-utils 1.0.10 → 1.0.12

package/dist/ui/components/color-picker/ColorPicker.stories.svelte

@@ -35,8 +35,8 @@
 
 <Story name="With Initial Color" args={{ color: '#00ff00' }} />
 
-<Story name="Store Controlled" args={{ color: controlledColor, onchange: handleChange }} />
-
 <Story name="Edge: Invalid Color" args={{ color: '#xyzxyz' }} />
 
 <Story name="Edge: No Color" args={{ color: undefined }} />
+
+<Story name="Disabled Picker" args={{ color: '#ebebeb', disabled: true }} />

package/dist/ui/components/color-picker/ColorPicker.svelte

@@ -2,15 +2,26 @@
 	import Tooltip from '../tooltip/Tooltip.svelte';
 	import ColorSelect from './ColorSelect.svelte';
 
-	let {
-		color = $bindable('#fff'),
-		onchange,
-		width = '80px'
-	} = $props<{
+	interface Props {
+		/**
+		 * The color to display in the picker.
+		 */
 		color?: string;
+		/**
+		 * The function to call when the color changes.
+		 */
 		onchange?: (color: string) => void;
+		/**
+		 * The width of the picker.
+		 */
 		width?: string;
-	}>();
+		/**
+		 * Whether the picker is disabled.
+		 */
+		disabled?: boolean;
+	}
+
+	let { color = $bindable('#fff'), onchange, width = '80px', disabled = false }: Props = $props();
 
 	function normalizeHex(value: string): string {
 		let v = value.trim();
@@ -74,13 +85,14 @@
 		listenerout="click"
 		showArrow={false}
 		padding="0"
+		{disabled}
 		stopPropagation={true}
 		width="241px"
 		placement="bottom"
 		fallbackPlacements={['top-end', 'top', 'bottom-end', 'bottom', 'top-start', 'bottom-start']}
 	>
 		{#snippet target()}
-			<div class="color-picker__swatch" data-testid="color-swatch">
+			<div class="color-picker__swatch" data-testid="color-swatch" class:disabled>
 				<div class="color-swatch" style="background-color: {color || '#000000'}"></div>
 			</div>
 		{/snippet}
@@ -92,7 +104,10 @@
 	<input
 		type="text"
 		class="color-picker__input"
+		class:disabled
 		bind:value={color}
+		{disabled}
+		readonly={disabled}
 		oninput={handleInputChange}
 		onkeydown={handleInputKeydown}
 		onpaste={handleInputPaste}

package/dist/ui/components/color-picker/ColorPicker.svelte.d.ts

@@ -1,8 +1,21 @@
-type $$ComponentProps = {
+interface Props {
+    /**
+     * The color to display in the picker.
+     */
     color?: string;
+    /**
+     * The function to call when the color changes.
+     */
     onchange?: (color: string) => void;
+    /**
+     * The width of the picker.
+     */
     width?: string;
-};
-declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "color">;
+    /**
+     * Whether the picker is disabled.
+     */
+    disabled?: boolean;
+}
+declare const ColorPicker: import("svelte").Component<Props, {}, "color">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/ui/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './button';
 export * from './button-group';
 export * from './checkbox';
 export * from './controlled-buttons';
+export * from './color-picker';
 export * from './copy-text';
 export * from './divider';
 export * from './iframe';

package/dist/ui/components/index.js

@@ -3,6 +3,7 @@ export * from './button';
 export * from './button-group';
 export * from './checkbox';
 export * from './controlled-buttons';
+export * from './color-picker';
 export * from './copy-text';
 export * from './divider';
 export * from './iframe';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {