@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/form/ComboBoxMulti.svelte

@@ -10,7 +10,7 @@
 		groupedOptions: ComboBoxGroup[];
 		loading: boolean;
 		open: boolean;
-		showNoResultsMessage: boolean;
+		hideNoResults: boolean;
 		loadingText: string;
 		onSelection: (value: ComboBoxItem) => void;
 		htmlElement?: HTMLElement;
@@ -23,7 +23,7 @@
 		groupedOptions = [],
 		loading = false,
 		open = $bindable(false),
-		showNoResultsMessage = true,
+		hideNoResults = false,
 		loadingText = '',
 		onSelection,
 		htmlElement = $bindable(undefined),
@@ -90,7 +90,7 @@
 		{:else if error}
 			<div class="p-2">{error}</div>
 		{:else if filterString && flattenedOptions?.length === 0}
-			{#if showNoResultsMessage}
+			{#if !hideNoResults}
 				<div class="p-2 no-results">No results found</div>
 			{/if}
 		{:else}
@@ -132,21 +132,32 @@
 {/if}
 
 <style>
+	/* .item {
+		&:hover,
+		&.selected {
+			@apply bg-main-border;
+			@apply text-accent;
+		}
+	} */
+
 	.combobox-multi {
 		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-multi-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 {
@@ -155,43 +166,46 @@
 		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;
 	}
 
 	.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));
 	}
 
 	.seperator {
 		height: 1px;
-		background-color: var(--pui-border-default);
-		margin: var(--pui-spacing-2) 0;
+		background-color: var(--border-color);
+		margin: 0.5rem 0;
 	}
 
 	.group-label {
-		font-weight: var(--pui-font-weight-bold);
-		padding: var(--pui-spacing-2);
-		background-color: var(--pui-bg-surface-raised);
-		color: var(--pui-accent-color);
+		font-weight: bold;
+		padding: 0.5rem;
+		background-color: #f6f6f6;
+		color: rgb(var(--accent-color-rgb));
 	}
 
 	.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;
 	}
 
-	:global(.dark) .group-label {
-		background: var(--pui-color-black);
+	:global(.dark) {
+		.group-label {
+			background: black;
+		}
 	}
 </style>

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

@@ -5,7 +5,7 @@ interface Props {
     groupedOptions: ComboBoxGroup[];
     loading: boolean;
     open: boolean;
-    showNoResultsMessage: boolean;
+    hideNoResults: boolean;
     loadingText: string;
     onSelection: (value: ComboBoxItem) => void;
     htmlElement?: HTMLElement;

package/dist/form/CronBuilder.svelte

@@ -1,27 +1,44 @@
-<script lang="ts">
-	import FormGroup from './FormGroup.svelte';
-	import Select from './Select.svelte';
-	import Number from './Number.svelte';
-	import Checkbox from './Checkbox.svelte';
-	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-	import { type Snippet, onMount, untrack } from 'svelte';
-	import { CronParser } from '../util/CronParser.js';
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
 
-	interface Props {
+	export interface CronBuilderProps {
+		/** Label text displayed above the builder */
 		label?: string;
+		/** Cron expression value (bindable) */
 		value?: string;
+		/** Placeholder text */
 		placeholder?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Disable the cron builder */
 		disabled?: boolean;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Rich tooltip content using a Svelte snippet */
 		tooltipContent?: Snippet;
+		/** Simple tooltip text */
 		tooltipText?: string;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Callback when cron expression changes */
 		onchange?: (expression: string) => void;
 	}
+</script>
+
+<script lang="ts">
+	import FormGroup from './FormGroup.svelte';
+	import Select from './Select.svelte';
+	import Number from './Number.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
+	import { onMount, untrack } from 'svelte';
+	import { CronParser } from '../util/CronParser.js';
 
 	let {
 		label = 'Schedule',
@@ -37,7 +54,7 @@
 		tooltipText,
 		tooltipLocation = 'top',
 		onchange
-	}: Props = $props();
+	}: CronBuilderProps = $props();
 
 	type FrequencyType = 'minute' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom';
 
@@ -520,7 +537,7 @@
 	.cron-builder {
 		display: flex;
 		flex-direction: column;
-		gap: var(--pui-spacing-4);
+		gap: 1rem;
 	}
 
 	.cron-builder.disabled {
@@ -535,7 +552,7 @@
 	.cron-settings {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: var(--pui-spacing-4);
+		gap: 1rem;
 	}
 
 	.weekday-selector {
@@ -544,39 +561,39 @@
 
 	.weekday-label {
 		display: block;
-		font-size: var(--pui-font-size-sm);
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-text-primary);
-		margin-bottom: var(--pui-spacing-2);
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--text-color);
+		margin-bottom: 0.5rem;
 	}
 
 	.weekday-buttons {
 		display: flex;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 		flex-wrap: wrap;
 	}
 
 	.weekday-btn {
-		padding: var(--pui-spacing-2) var(--pui-spacing-4);
-		border: 1px solid var(--pui-border-default);
-		background: var(--pui-input-bg);
-		color: var(--pui-text-primary);
-		border-radius: var(--pui-radius-md);
+		padding: 0.5rem 1rem;
+		border: 1px solid var(--border-color);
+		background: var(--input-bg);
+		color: var(--text-color);
+		border-radius: 0.375rem;
 		cursor: pointer;
-		font-size: var(--pui-font-size-sm);
-		font-weight: var(--pui-font-weight-medium);
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		font-size: 0.875rem;
+		font-weight: 500;
+		transition: all 0.2s;
 	}
 
 	.weekday-btn:hover:not(:disabled) {
-		background: var(--pui-bg-hover);
-		border-color: var(--pui-color-primary);
+		background: rgba(var(--ui-primary-rgbc), 0.05);
+		border-color: var(--ui-primary);
 	}
 
 	.weekday-btn.selected {
-		background: var(--pui-color-primary);
-		color: var(--pui-color-white);
-		border-color: var(--pui-color-primary);
+		background: var(--ui-primary);
+		color: white;
+		border-color: var(--ui-primary);
 	}
 
 	.weekday-btn:disabled {
@@ -586,23 +603,23 @@
 	.custom-inputs {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-		gap: var(--pui-spacing-4);
+		gap: 1rem;
 		grid-column: 1 / -1;
 	}
 
 	.form-control {
 		width: 100%;
-		padding: var(--pui-spacing-2);
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-md);
-		background: var(--pui-input-bg);
-		color: var(--pui-text-primary);
-		font-size: var(--pui-font-size-sm);
+		padding: 0.5rem;
+		border: 1px solid var(--border-color);
+		border-radius: 0.375rem;
+		background: var(--input-bg);
+		color: var(--text-color);
+		font-size: 0.875rem;
 	}
 
 	.form-control:focus {
 		outline: none;
-		border-color: var(--pui-color-primary);
+		border-color: var(--ui-primary);
 	}
 
 	.form-control:disabled {
@@ -613,11 +630,11 @@
 	.cron-output {
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;
-		gap: var(--pui-spacing-4);
-		padding: var(--pui-spacing-4);
-		background: var(--pui-bg-subtle);
-		border-radius: var(--pui-radius-md);
-		border: 1px solid var(--pui-border-default);
+		gap: 1rem;
+		padding: 1rem;
+		background: rgba(var(--ui-primary-rgbc), 0.05);
+		border-radius: 0.375rem;
+		border: 1px solid var(--border-color);
 	}
 
 	.cron-expression,
@@ -625,55 +642,55 @@
 	.cron-next-run {
 		display: flex;
 		flex-direction: column;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 	}
 
 	.cron-output .cron-label {
-		font-size: var(--pui-font-size-xs);
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-text-muted);
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
 
 	.cron-expression code {
 		font-family: 'Courier New', monospace;
-		font-size: var(--pui-font-size-sm);
-		padding: var(--pui-spacing-2);
-		background: var(--pui-input-bg);
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-sm);
-		color: var(--pui-color-primary);
-		font-weight: var(--pui-font-weight-semibold);
+		font-size: 0.875rem;
+		padding: 0.5rem;
+		background: var(--input-bg);
+		border: 1px solid var(--border-color);
+		border-radius: 0.25rem;
+		color: var(--ui-primary);
+		font-weight: 600;
 	}
 
 	.readable-text,
 	.next-run-text {
-		font-size: var(--pui-font-size-sm);
-		color: var(--pui-text-primary);
-		padding: var(--pui-spacing-2);
-		background: var(--pui-input-bg);
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-sm);
+		font-size: 0.875rem;
+		color: var(--text-color);
+		padding: 0.5rem;
+		background: var(--input-bg);
+		border: 1px solid var(--border-color);
+		border-radius: 0.25rem;
 	}
 
 	:global(.dark) .weekday-btn:hover:not(:disabled) {
-		background: var(--pui-bg-hover);
-		border-color: var(--pui-color-secondary);
+		background: rgba(var(--ui-accent-rgbc), 0.1);
+		border-color: var(--ui-accent);
 	}
 
 	:global(.dark) .weekday-btn.selected {
-		background: var(--pui-color-secondary);
-		color: var(--pui-color-primary);
-		border-color: var(--pui-color-secondary);
+		background: var(--ui-accent);
+		color: var(--ui-primary);
+		border-color: var(--ui-accent);
 	}
 
 	:global(.dark) .cron-output {
-		background: var(--pui-bg-subtle);
+		background: rgba(var(--ui-accent-rgbc), 0.05);
 	}
 
 	:global(.dark) .cron-expression code {
-		color: var(--pui-color-secondary);
+		color: var(--ui-accent);
 	}
 
 	@media (max-width: 1024px) {

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

@@ -1,19 +1,32 @@
-import { type Snippet } from 'svelte';
-interface Props {
+import type { Snippet } from 'svelte';
+export interface CronBuilderProps {
+    /** Label text displayed above the builder */
     label?: string;
+    /** Cron expression value (bindable) */
     value?: string;
+    /** Placeholder text */
     placeholder?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Disable the cron builder */
     disabled?: boolean;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Rich tooltip content using a Svelte snippet */
     tooltipContent?: Snippet;
+    /** Simple tooltip text */
     tooltipText?: string;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Callback when cron expression changes */
     onchange?: (expression: string) => void;
 }
-declare const CronBuilder: import("svelte").Component<Props, {}, "value">;
+declare const CronBuilder: import("svelte").Component<CronBuilderProps, {}, "value">;
 type CronBuilder = ReturnType<typeof CronBuilder>;
 export default CronBuilder;