@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/form/ColorPicker.svelte.d.ts

@@ -0,0 +1,78 @@
+import type { Snippet } from 'svelte';
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export interface ColorPickerProps {
+    /** HTML name attribute for the input (falls back to label, then auto-generated) */
+    name?: string;
+    /** Label text displayed above the picker */
+    label?: string;
+    /** Custom ID for the input element */
+    inputId?: string;
+    /** Placeholder text when no colour is set */
+    placeholder?: string;
+    /** Mark field as required (shows asterisk) */
+    required?: boolean;
+    /** Disable the picker */
+    disabled?: boolean;
+    /** CSS classes for the container element */
+    containerClass?: string;
+    /** CSS classes for the input element */
+    class?: string;
+    /**
+     * Selected colour (bindable). Always stored as a hex string, e.g. `#1e3a5f`,
+     * or `#1e3a5f80` when `allowAlpha` is set and the colour is not fully opaque.
+     */
+    value?: string;
+    /** Allow selecting transparency; value becomes 8-digit hex when alpha < 1 */
+    allowAlpha?: boolean;
+    /** Preset swatches shown below the picker area */
+    swatches?: string[];
+    /** Hide the editable text input beside the swatch */
+    hideInput?: boolean;
+    /** Hide the eyedropper button (only shown when the browser supports it) */
+    hideEyeDropper?: boolean;
+    /** Which text format to show in the popup's readout */
+    format?: ColorFormat;
+    /** Show error state styling */
+    showError?: boolean;
+    /** Error message to display */
+    errorText?: string;
+    /** Position of the tooltip */
+    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Rich tooltip content using a Svelte snippet */
+    tooltipContent?: Snippet;
+    /** Simple tooltip text */
+    tooltipText?: string;
+    /** Callback when the colour changes (fires on every drag step) */
+    onchange?: (value: string) => void;
+}
+export type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+/** Parse a hex string (#rgb, #rgba, #rrggbb, #rrggbbaa) into RGB(A). Returns undefined if invalid. */
+export declare function parseHex(input: string | undefined): Rgb | undefined;
+/** Format RGB(A) as a hex string. Alpha is only appended when < 1. */
+export declare function toHex({ r, g, b, a }: Rgb): string;
+export declare function rgbToHsv({ r, g, b, a }: Rgb): Hsv;
+export declare function hsvToRgb({ h, s, v, a }: Hsv): Rgb;
+export declare function rgbToHsl({ r, g, b, a }: Rgb): {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+/** Format a colour in the requested CSS notation. */
+export declare function formatColor(rgb: Rgb, format: ColorFormat): string;
+/** Parse any of hex / rgb() / hsl() into RGB(A). Returns undefined if invalid. */
+export declare function parseColor(input: string | undefined): Rgb | undefined;
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/form/ComboBox.svelte

@@ -8,7 +8,7 @@
 		loading: boolean;
 		open: boolean;
 		htmlElement?: HTMLElement | undefined;
-		showNoResultsMessage: boolean;
+		hideNoResults: boolean;
 		loadingText: string;
 		onselection: (value: ComboBoxItem) => void;
 		onkeydown?: (e: KeyboardEvent) => boolean;
@@ -20,7 +20,7 @@
 		loading,
 		open,
 		htmlElement,
-		showNoResultsMessage,
+		hideNoResults,
 		loadingText,
 		onselection: onSelection,
 		onkeydown
@@ -72,7 +72,7 @@
 		{:else if error}
 			<div class="error">{error}</div>
 		{:else if value && options?.length === 0}
-			{#if showNoResultsMessage}
+			{#if !hideNoResults}
 				<div class="no-results">No results found</div>
 			{/if}
 		{:else}
@@ -104,21 +104,32 @@
 {/if}
 
 <style>
+	/* .item {
+		&:hover,
+		&.selected {
+			@apply bg-main-border;
+			@apply text-accent;
+		}
+	} */
+
 	.combobox {
 		position: absolute;
 		width: 100%;
-		z-index: var(--pui-z-dropdown);
-		border-radius: var(--pui-radius-base);
+		z-index: 50;
+		border-radius: 0.25rem;
 		overflow: hidden;
-		border: 1px solid var(--pui-border-default);
-		background-color: var(--pui-input-bg);
+		border: 1px solid var(--main-border-color);
+		background-color: var(--input-bg-color);
+		/* absolute w-full z-50 rounded overflow-hidden
+			border border-main-border bg-input */
 	}
 
 	.combobox-panel {
 		overflow: auto;
 		max-height: 20rem;
-		border: 1px solid var(--pui-border-default);
+		border: 1px solid var(--border-color);
 		border-top: none;
+		/* max-h-80 overflow-auto */
 	}
 
 	.combobox-item {
@@ -127,32 +138,31 @@
 		align-items: center;
 		text-align: left;
 		background-color: transparent;
-		color: var(--pui-text-primary);
+		color: var(--text-color);
 		border: none;
-		font-size: var(--pui-font-size-md);
+		font-size: 1rem;
 		cursor: pointer;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
+		/* item w-full flex items-center text-left */
 	}
 
 	.p-2 {
-		padding: var(--pui-spacing-2);
+		padding: 0.5rem;
 	}
 
-	.error,
-	.loading,
-	.no-results {
-		padding: var(--pui-spacing-2);
+	.error, .loading, .no-results {
+		padding: 0.5rem;
 	}
 
 	.no-results {
-		color: var(--pui-text-primary);
-		border: 1px solid var(--pui-border-default);
+		color: var(--text-color);
+		border: 1px solid var(--border-color);
 		border-top: none;
 	}
 
 	.combobox-item.selected,
 	.combobox-item:hover {
-		background-color: var(--pui-bg-hover);
-		color: var(--pui-accent-color);
+		background-color: var(--border-color);
+		color: rgb(var(--accent-color-rgb));
 	}
 </style>

package/dist/form/ComboBox.svelte.d.ts

@@ -5,7 +5,7 @@ interface Props {
     loading: boolean;
     open: boolean;
     htmlElement?: HTMLElement | undefined;
-    showNoResultsMessage: boolean;
+    hideNoResults: boolean;
     loadingText: string;
     onselection: (value: ComboBoxItem) => void;
     onkeydown?: (e: KeyboardEvent) => boolean;