@insymetri/styleguide 0.1.20 → 0.1.22

package/dist/IIAuditTrail/IIAuditTrail.svelte

@@ -2,6 +2,7 @@
 	import {cn} from '../utils/cn'
 	import type {IconName} from '../icons'
 	import {IIIcon} from '../IIIcon'
+	import {IIPillTabs} from '../IIPillTabs'
 
 	import type {Severity, AuditEvent, AuditFilter} from './IIAuditTrail.types'
 
@@ -88,21 +89,7 @@
 </script>
 
 {#if filters.length > 0}
-	<div class="flex gap-8 flex-wrap mb-16">
-		{#each filters as f (f.value)}
-			<button
-				class={cn(
-					'flex items-center gap-4 px-12 py-8 rounded-full text-small-emphasis cursor-default',
-					activeFilter === f.value
-						? 'bg-gray-100 text-body border border-strong'
-						: 'bg-surface text-secondary border border-primary hover:bg-gray-100 hover:border-strong'
-				)}
-				onclick={() => (activeFilter = f.value)}
-			>
-				{f.label}
-			</button>
-		{/each}
-	</div>
+	<IIPillTabs tabs={filters} bind:value={activeFilter} class="mb-16" />
 {/if}
 
 {#if loading}

package/dist/IICheckbox/IICheckbox.svelte

@@ -45,7 +45,7 @@
 			class={cn(
 				'flex items-center justify-center border-2 rounded-4 transition-all duration-fast motion-reduce:transition-none',
 				size === 'sm' ? 'w-16 h-16' : 'w-18 h-18',
-				checked ? 'bg-primary border-primary' : 'border-strong bg-surface',
+				checked ? 'bg-primary border-accent' : 'border-strong bg-surface',
 				disabled && 'opacity-50'
 			)}
 		>

package/dist/IICombobox/IICombobox.svelte

@@ -127,7 +127,7 @@
 {#snippet comboboxItem(item: T, i: number)}
 	<Combobox.Item
 		value={getItemValue(item)}
-		label=""
+		label={isSimpleItem(item) ? item.label : getItemValue(item)}
 		disabled={getItemDisabled?.(item) ?? false}
 		class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none"
 	>

package/dist/IIDateInput/IIDateInput.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import {DatePicker} from 'bits-ui'
+	import type {DateValue} from '@internationalized/date'
+	import {IIIcon} from '../IIIcon'
+	import {IIIconButton} from '../IIIconButton'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		value: DateValue | undefined
+		label?: string
+		errorMessage?: string
+		helperText?: string
+		error?: boolean
+		disabled?: boolean
+		onValueChange?: (value: DateValue | undefined) => void
+		class?: string
+	}
+
+	let {
+		value = $bindable(),
+		label,
+		errorMessage,
+		helperText,
+		error = false,
+		disabled = false,
+		onValueChange,
+		class: className,
+	}: Props = $props()
+
+	const showError = $derived(error || !!errorMessage)
+</script>
+
+<div class={cn('flex flex-col gap-4', className)}>
+	<DatePicker.Root bind:value {onValueChange} {disabled}>
+		{#if label}
+			<DatePicker.Label class="text-small-emphasis text-body">{label}</DatePicker.Label>
+		{/if}
+		<DatePicker.Input
+			class={cn(
+				'flex items-center gap-4 py-5 px-12 border rounded-control text-small bg-input-bg border-input-border transition-all duration-fast hover:border-input-border-hover [&:has(:focus)]:border-input-border-hover motion-reduce:transition-none',
+				showError && 'border-input-border-error [&:has(:focus)]:border-input-border-error',
+				disabled && 'bg-input-bg-disabled cursor-not-allowed'
+			)}
+		>
+			{#snippet children({segments})}
+				{#each segments as { part, value: segValue }, i (`${part}-${i}`)}
+					<DatePicker.Segment
+						{part}
+						class="py-4 min-w-[2ch] text-center text-input-text outline-none cursor-text rounded-4 transition-all duration-fast focus:bg-primary focus:text-inverse data-[placeholder]:text-input-placeholder motion-reduce:transition-none"
+					>
+						{segValue}
+					</DatePicker.Segment>
+				{/each}
+				<DatePicker.Trigger asChild>
+					{#snippet child({props})}
+						<IIIconButton {...props} iconName="calendar" variant="ghost" size="sm" disabled={disabled} />
+					{/snippet}
+				</DatePicker.Trigger>
+			{/snippet}
+		</DatePicker.Input>
+		<DatePicker.Content class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280">
+			<DatePicker.Calendar>
+				{#snippet children({months, weekdays})}
+					<div class="flex items-center justify-between gap-16 mb-12">
+						<DatePicker.MonthSelect aria-label="Select month" monthFormat="long">
+							{#snippet child({props, monthItems, selectedMonthItem})}
+								<select
+									{...props}
+									class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none flex-1"
+									style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right center"
+								>
+									{#each monthItems as month (month.value)}
+										<option value={month.value} selected={month.value === selectedMonthItem.value}>
+											{month.label}
+										</option>
+									{/each}
+								</select>
+							{/snippet}
+						</DatePicker.MonthSelect>
+						<DatePicker.YearSelect aria-label="Select year">
+							{#snippet child({props, yearItems, selectedYearItem})}
+								<select
+									{...props}
+									class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none"
+									style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right center"
+								>
+									{#each yearItems as year (year.value)}
+										<option value={year.value} selected={year.value === selectedYearItem.value}>
+											{year.label}
+										</option>
+									{/each}
+								</select>
+							{/snippet}
+						</DatePicker.YearSelect>
+					</div>
+
+					{#each months as month (month.value.toString())}
+						<DatePicker.Grid class="w-full border-collapse">
+							<DatePicker.GridHead>
+								<DatePicker.GridRow class="flex w-full">
+									{#each weekdays as day, i (`day-${i}`)}
+										<DatePicker.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
+											{day.slice(0, 2)}
+										</DatePicker.HeadCell>
+									{/each}
+								</DatePicker.GridRow>
+							</DatePicker.GridHead>
+							<DatePicker.GridBody>
+								{#each month.weeks as weekDates, weekIndex (weekIndex)}
+									<DatePicker.GridRow class="flex w-full">
+										{#each weekDates as date (date.toString())}
+											<DatePicker.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
+												<DatePicker.Day
+													class="[all:unset] flex items-center justify-center w-full h-full rounded-4 text-small text-body cursor-default transition-all duration-fast hover:bg-gray-100 data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[today]:border data-[today]:border-primary data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-30 motion-reduce:transition-none"
+												>
+													{date.day}
+												</DatePicker.Day>
+											</DatePicker.Cell>
+										{/each}
+									</DatePicker.GridRow>
+								{/each}
+							</DatePicker.GridBody>
+						</DatePicker.Grid>
+					{/each}
+				{/snippet}
+			</DatePicker.Calendar>
+		</DatePicker.Content>
+	</DatePicker.Root>
+	{#if showError && errorMessage}
+		<span class="text-tiny text-error">{errorMessage}</span>
+	{:else if helperText}
+		<span class="text-tiny text-secondary">{helperText}</span>
+	{/if}
+</div>

package/dist/IIDateInput/IIDateInput.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DateValue } from '@internationalized/date';
+type Props = {
+    value: DateValue | undefined;
+    label?: string;
+    errorMessage?: string;
+    helperText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    onValueChange?: (value: DateValue | undefined) => void;
+    class?: string;
+};
+declare const IIDateInput: import("svelte").Component<Props, {}, "value">;
+type IIDateInput = ReturnType<typeof IIDateInput>;
+export default IIDateInput;

package/dist/IIDateInput/index.d.ts

@@ -0,0 +1 @@
+export { default as IIDateInput } from './IIDateInput.svelte';

package/dist/IIDateInput/index.js

@@ -0,0 +1 @@
+export { default as IIDateInput } from './IIDateInput.svelte';

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -60,7 +60,7 @@
 		bind:ref={triggerEl}
 		{disabled}
 		class={cn(
-			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border rounded-control bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border rounded-control bg-input-bg cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}

package/dist/IIModal/IIModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
 	import {Dialog} from 'bits-ui'
-	import {IIIcon} from '../IIIcon'
+	import {IIIconButton} from '../IIIconButton'
 	import {cn} from '../utils/cn'
 
 	type Props = {
@@ -46,7 +46,7 @@
 				className
 			)}
 		>
-			<div class="flex items-center justify-between p-16 border-b border-primary shrink-0">
+			<div class="flex items-start justify-between p-16 border-b border-primary shrink-0">
 				<div>
 					<Dialog.Title class="text-h4 text-body m-0">{title}</Dialog.Title>
 					{#if description}
@@ -56,10 +56,10 @@
 					{/if}
 				</div>
 				{#if showCloseButton}
-					<Dialog.Close
-						class="[all:unset] cursor-default flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body motion-reduce:transition-none"
-					>
-						<IIIcon iconName="x" class="size-20" />
+					<Dialog.Close asChild>
+						{#snippet child({props})}
+							<IIIconButton {...props} iconName="x" variant="ghost" size="sm" />
+						{/snippet}
 					</Dialog.Close>
 				{/if}
 			</div>

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { IICard } from './IICard';
 export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
+export { IIDateInput } from './IIDateInput';
 export { IIDatePicker } from './IIDatePicker';
 export { IIDropdownInput } from './IIDropdownInput';
 export { IIDropdownMenu } from './IIDropdownMenu';

package/dist/index.js

@@ -12,6 +12,7 @@ export { IICard } from './IICard';
 export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
+export { IIDateInput } from './IIDateInput';
 export { IIDatePicker } from './IIDatePicker';
 export { IIDropdownInput } from './IIDropdownInput';
 export { IIDropdownMenu } from './IIDropdownMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.20",
+	"version": "0.1.22",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {