@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/datetime-picker/cmp.datetime-picker.svelte

@@ -1,292 +0,0 @@
-<script lang="ts">import { AppTheme } from '../../core/theme';
-import { randomString, Utils } from '../../core/utils';
-import { Icon } from '../icon';
-import { DatetimePickerLocalization } from './datetime-picker-localization';
-import { applyFlatpickrTheme } from './flatpickr-theme';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-import flatpickr from 'flatpickr';
-let { datetime, placeholder = null, pickerOptions, disabled = false, icon, on } = $props();
-const id = randomString(10);
-const localization = new DatetimePickerLocalization();
-let timePartHolder;
-let showClearButton = $state(false);
-let fpInstance = $state.raw(undefined);
-let picker;
-const preprocessInitialValue = (datetime) => {
-    let date = undefined;
-    if (!datetime) {
-        if (pickerOptions.noValueHandler !== 'allow-empty') {
-            date = pickerOptions.noValueHandler === 'reset-to-now' || !pickerOptions.noValueHandler ? new Date() : pickerOptions.noValueHandler;
-        }
-    }
-    else {
-        date = new Date(datetime);
-    }
-    if (date && pickerOptions.mode === 'date') {
-        date.setHours(0, 0, 0, 0);
-    }
-    if (pickerOptions.mode === 'date-keeping-time') {
-        timePartHolder = date || new Date(2000, 1, 1, 12, 0);
-    }
-    notifyChangedValue(date);
-    return date;
-};
-const notifyChangedValue = (date) => {
-    if (!date && !datetime) {
-        return;
-    }
-    if (!date && datetime) {
-        on?.change?.(undefined);
-        return;
-    }
-    if (!datetime || date.toISOString() !== new Date(datetime).toISOString()) {
-        on?.change?.(date.toISOString());
-    }
-};
-const getDefaultPlaceholder = () => {
-    switch (pickerOptions.mode) {
-        case 'date':
-        case 'date-keeping-time':
-            return localization.date;
-        case 'time':
-            return localization.time;
-        default:
-            return localization.dateTime;
-    }
-};
-const initPicker = (node) => {
-    picker = node;
-    applyFlatpickrTheme(AppTheme.isDarkMode);
-    const opts = pickerOptions ?? {};
-    const mode = opts.mode ?? 'datetime';
-    const noValueHandler = opts.noValueHandler ?? 'reset-to-now';
-    let format;
-    switch (mode) {
-        case 'datetime':
-            format = { picker: 'd M Y H:i', enableTime: true, showCalendar: true };
-            break;
-        case 'date':
-        case 'date-keeping-time':
-            format = { picker: 'd M Y', enableTime: false, showCalendar: true };
-            break;
-        case 'time':
-            format = { picker: 'H:i', enableTime: true, showCalendar: false };
-            break;
-        default:
-            return Utils.assertUnreachable(mode);
-    }
-    const defaultDate = preprocessInitialValue(datetime);
-    fpInstance = flatpickr(picker, {
-        dateFormat: format.picker,
-        defaultDate,
-        enableTime: format.enableTime,
-        noCalendar: !format.showCalendar,
-        time_24hr: true,
-        wrap: true,
-        locale: { firstDayOfWeek: 1 },
-        minDate: opts.minDate,
-        maxDate: opts.maxDate,
-        positionElement: picker,
-        onChange: (selectedDates) => {
-            let dateToProcess = !selectedDates.length && noValueHandler instanceof Date ? noValueHandler : selectedDates[0];
-            dateToProcess = dateToProcess ? new Date(dateToProcess.getTime()) : null;
-            if (dateToProcess) {
-                if (mode === 'date-keeping-time') {
-                    dateToProcess.setHours(timePartHolder.getHours(), timePartHolder.getMinutes());
-                }
-                fpInstance?.setDate(dateToProcess);
-            }
-            notifyChangedValue(dateToProcess);
-        },
-        onOpen: () => {
-            if (fpInstance?.selectedDates) {
-                fpInstance.jumpToDate(fpInstance.selectedDates[0]);
-            }
-        }
-    });
-};
-$effect(() => {
-    applyFlatpickrTheme(AppTheme.isDarkMode);
-});
-$effect(() => {
-    if (!datetime) {
-        showClearButton = false;
-    }
-    else {
-        const handler = pickerOptions.noValueHandler;
-        switch (handler) {
-            case 'reset-to-now':
-                showClearButton = false;
-                break;
-            case 'allow-empty':
-                showClearButton = true;
-                break;
-            default:
-                showClearButton = !!handler && new Date(datetime).getTime() !== handler.getTime();
-        }
-    }
-});
-$effect(() => {
-    if (fpInstance) {
-        const date = preprocessInitialValue(datetime);
-        if (date) {
-            fpInstance.setDate(date);
-        }
-        else {
-            fpInstance.clear();
-        }
-        fpInstance._input.disabled = disabled;
-    }
-});
-$effect(() => {
-    return () => {
-        fpInstance?.destroy();
-    };
-});
-</script>
-
-<div class="datetime-picker" class:datetime-picker--disabled={disabled} use:initPicker id={id}>
-  {#if icon}
-    <div class="datetime-picker__icon">
-      {@render icon()}
-    </div>
-  {/if}
-  <input data-input class="datetime-picker__input" placeholder={placeholder ?? getDefaultPlaceholder()} disabled={disabled} />
-  <button type="button" class="datetime-picker__clear-button" class:datetime-picker__clear-button--hidden={!showClearButton || disabled} data-clear>
-    <Icon src={IconDismiss} />
-  </button>
-</div>
-
-<!--
-@component
-A date/time picker powered by flatpickr, supporting date, time, and datetime modes.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--datetime-picker--root--font-size` | Root font size for em scaling | `1rem` |
-| `--sc-kit--datetime-picker--height` | Container height | `2em` |
-| `--sc-kit--datetime-picker--width` | Container width | `100%` |
-| `--sc-kit--datetime-picker--padding--inline` | Inline (horizontal) padding | `0.5em` |
-| `--sc-kit--datetime-picker--padding--block` | Block (vertical) padding | `0` |
-| `--sc-kit--datetime-picker--background` | Background color | light-dark white/gray-900 |
-| `--sc-kit--datetime-picker--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
-| `--sc-kit--datetime-picker--border-color` | Border color | light-dark neutral-300/neutral-600 |
-| `--sc-kit--datetime-picker--border-radius` | Border radius | `0.25em` |
-| `--sc-kit--datetime-picker--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
-| `--sc-kit--datetime-picker--text--font-size` | Text font size | `0.875em` |
-| `--sc-kit--datetime-picker--text--color` | Text color | light-dark gray-800/white |
-| `--sc-kit--datetime-picker--placeholder--color` | Placeholder color | inherited from border |
-| `--sc-kit--datetime-picker--icon--size` | Icon size | `1em` |
-| `--sc-kit--datetime-picker--icon--color` | Icon color | inherited from border |
--->
-
-<style>.datetime-picker {
-  --_--input--root--font-size: var(--sc-kit--datetime-picker--root--font-size);
-  --_--input--height: var(--sc-kit--datetime-picker--height);
-  --_--input--width: var(--sc-kit--datetime-picker--width);
-  --_--input--background: var(--sc-kit--datetime-picker--background);
-  --_--input--background--disabled: var(--sc-kit--datetime-picker--background--disabled);
-  --_--input--border-color: var(--sc-kit--datetime-picker--border-color);
-  --_--input--border-radius: var(--sc-kit--datetime-picker--border-radius);
-  --_--input--icon--size: var(--sc-kit--datetime-picker--icon--size);
-  --_--input--icon--color: var(--sc-kit--datetime-picker--icon--color);
-  --_--input--text--font-size: var(--sc-kit--datetime-picker--text--font-size);
-  --_--input--text--color: var(--sc-kit--datetime-picker--text--color);
-  --_--input--placeholder--color: var(--sc-kit--datetime-picker--placeholder--color);
-  --_--input--accent-color: var(--sc-kit--datetime-picker--accent-color);
-  --_--input--padding--inline: var(--sc-kit--datetime-picker--padding--inline);
-  --_--input--padding--block: var(--sc-kit--datetime-picker--padding--block);
-  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
-  --_input--height: var(--_--input--height, 2em);
-  --_input--width: var(--_--input--width, 100%);
-  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
-  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
-  --_input--border-color: var(--_--input--border-color, light-dark(#f2f2f3, #1e1e1e));
-  --_input--border-radius: var(--_--input--border-radius, 0.25em);
-  --_input--icon--size: var(--_--input--icon--size, 1em);
-  --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
-  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
-  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
-  --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
-  --input--placeholder--color: var(--_--input--placeholder--color);
-  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
-  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
-  --_input--padding--block: var(--_--input--padding--block, 0);
-  --_input--padding-top: var(--_--input--padding-top, var(--_input--padding--block));
-  --_input--padding-right: var(--_--input--padding-right, var(--_input--padding--inline));
-  --_input--padding-bottom: var(--_--input--padding-bottom, var(--_input--padding--block));
-  --_input--padding-left: var(--_--input--padding-left, var(--_input--padding--inline));
-  font-size: var(--_input--root--font-size);
-  height: var(--_input--height);
-  color: var(--_input--text--color);
-  border: 1px solid var(--_input--border-color);
-  border-radius: var(--_input--border-radius);
-  width: var(--_input--width);
-  min-width: var(--_input--width);
-  background: var(--_input--background);
-  padding-top: var(--_input--padding-top);
-  padding-right: var(--_input--padding-right);
-  padding-bottom: var(--_input--padding-bottom);
-  padding-left: var(--_input--padding-left);
-  --_input--default-shadow-color: transparent;
-  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
-  position: relative;
-  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
-}
-.datetime-picker:focus, .datetime-picker:focus-within {
-  --_input--default-shadow-color: var(--_input--accent-color);
-}
-.datetime-picker {
-  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.datetime-picker--disabled {
-  background-color: var(--_input--background--disabled);
-  cursor: default;
-}
-.datetime-picker {
-  display: flex;
-  align-items: center;
-  gap: 0.625em;
-  cursor: pointer;
-  position: relative;
-}
-.datetime-picker :global(.flatpickr-calendar) {
-  z-index: 9999993 !important;
-  display: none;
-}
-.datetime-picker :global(.flatpickr-calendar) :global(.flatpickr-time) :global(.numInputWrapper) :global(input[type=number]) {
-  outline: none;
-  border: none;
-  color: #2e2e2e;
-  height: inherit;
-}
-.datetime-picker__icon, .datetime-picker__clear-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--_input--icon--color);
-  font-size: var(--_input--icon--size);
-  line-height: 0;
-  cursor: pointer;
-}
-.datetime-picker__input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  padding: 0;
-  background-color: transparent !important;
-  cursor: pointer;
-  font-size: var(--_input--text--font-size);
-  color: var(--_input--text--color);
-}
-.datetime-picker__input::placeholder {
-  color: var(--_input--placeholder--color);
-}
-.datetime-picker__input:-webkit-autofill {
-  -webkit-text-fill-color: var(--_input--text--color) !important;
-}
-.datetime-picker__clear-button--hidden {
-  display: none;
-}</style>

package/dist/ui/datetime-picker/cmp.datetime-picker.svelte.d.ts

@@ -1,37 +0,0 @@
-import type { DatetimePickerOptions, LikeDate } from './types';
-import type { Snippet } from 'svelte';
-type Props = {
-    datetime: LikeDate | null | undefined;
-    placeholder?: string | null;
-    pickerOptions: DatetimePickerOptions;
-    disabled?: boolean;
-    on?: {
-        change: (value: string | undefined) => void;
-    };
-    icon?: Snippet;
-};
-/**
- * A date/time picker powered by flatpickr, supporting date, time, and datetime modes.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--datetime-picker--root--font-size` | Root font size for em scaling | `1rem` |
- * | `--sc-kit--datetime-picker--height` | Container height | `2em` |
- * | `--sc-kit--datetime-picker--width` | Container width | `100%` |
- * | `--sc-kit--datetime-picker--padding--inline` | Inline (horizontal) padding | `0.5em` |
- * | `--sc-kit--datetime-picker--padding--block` | Block (vertical) padding | `0` |
- * | `--sc-kit--datetime-picker--background` | Background color | light-dark white/gray-900 |
- * | `--sc-kit--datetime-picker--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
- * | `--sc-kit--datetime-picker--border-color` | Border color | light-dark neutral-300/neutral-600 |
- * | `--sc-kit--datetime-picker--border-radius` | Border radius | `0.25em` |
- * | `--sc-kit--datetime-picker--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
- * | `--sc-kit--datetime-picker--text--font-size` | Text font size | `0.875em` |
- * | `--sc-kit--datetime-picker--text--color` | Text color | light-dark gray-800/white |
- * | `--sc-kit--datetime-picker--placeholder--color` | Placeholder color | inherited from border |
- * | `--sc-kit--datetime-picker--icon--size` | Icon size | `1em` |
- * | `--sc-kit--datetime-picker--icon--color` | Icon color | inherited from border |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/datetime-picker/datetime-picker-localization.d.ts

@@ -1,5 +0,0 @@
-export declare class DatetimePickerLocalization {
-    get date(): string;
-    get time(): string;
-    get dateTime(): string;
-}

package/dist/ui/datetime-picker/datetime-picker-localization.js

@@ -1,26 +0,0 @@
-import { AppLocale } from '../../core/locale';
-export class DatetimePickerLocalization {
-    get date() {
-        return loc.date[AppLocale.current];
-    }
-    get time() {
-        return loc.time[AppLocale.current];
-    }
-    get dateTime() {
-        return loc.dateTime[AppLocale.current];
-    }
-}
-const loc = {
-    date: {
-        en: 'Date',
-        no: 'Dato'
-    },
-    time: {
-        en: 'Time',
-        no: 'Tid'
-    },
-    dateTime: {
-        en: 'Date and time',
-        no: 'Dato og tid'
-    }
-};

package/dist/ui/datetime-picker/flatpickr-theme.d.ts

@@ -1 +0,0 @@
-export declare const applyFlatpickrTheme: (isDark: boolean) => void;

package/dist/ui/datetime-picker/flatpickr-theme.js

@@ -1,13 +0,0 @@
-import airbnbTheme from 'flatpickr/dist/themes/airbnb.css?inline';
-import darkTheme from 'flatpickr/dist/themes/dark.css?inline';
-let styleEl = null;
-export const applyFlatpickrTheme = (isDark) => {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    if (!styleEl) {
-        styleEl = document.createElement('style');
-        document.head.prepend(styleEl);
-    }
-    styleEl.textContent = isDark ? darkTheme : airbnbTheme;
-};

package/dist/ui/datetime-picker/index.d.ts

@@ -1,2 +0,0 @@
-export { default as DatetimePicker } from './cmp.datetime-picker.svelte';
-export type { DatetimePickerMode, DatetimePickerNoValueHandler, DatetimePickerOptions } from './types';

package/dist/ui/datetime-picker/index.js

@@ -1 +0,0 @@
-export { default as DatetimePicker } from './cmp.datetime-picker.svelte';

package/dist/ui/datetime-picker/types.d.ts

@@ -1,16 +0,0 @@
-export type LikeDate = string | number | Date;
-export type PickerFormat = {
-    picker: string;
-    enableTime: boolean;
-    showCalendar: boolean;
-};
-export type DatetimePickerMode = 'datetime' | 'date' | 'date-keeping-time' | 'time';
-export type DatetimePickerNoValueHandler = 'reset-to-now' | 'allow-empty' | Date;
-export type DatetimePickerOptions = {
-    /** @default 'datetime' */
-    mode?: DatetimePickerMode;
-    /** @default 'reset-to-now' */
-    noValueHandler?: DatetimePickerNoValueHandler;
-    minDate?: Date;
-    maxDate?: Date;
-};

package/dist/ui/dialog/dialog-mount.d.ts

@@ -1,3 +0,0 @@
-import type { AnyDialogData } from './dialog-data';
-export declare const mountDialog: (dialog: AnyDialogData, host?: ParentNode) => void;
-export declare const unmountDialog: (dialog: AnyDialogData) => void;

package/dist/ui/dialog/dialog-mount.js

@@ -1,19 +0,0 @@
-import { default as DialogContainer } from './cmp.dialog-container.svelte';
-import { mount, unmount } from 'svelte';
-export const mountDialog = (dialog, host) => {
-    const hostElement = document.createElement('div');
-    hostElement.setAttribute('data-dialog-host', String(dialog.id));
-    (host ?? document.body).appendChild(hostElement);
-    const component = mount(DialogContainer, {
-        target: hostElement,
-        props: { dialog }
-    });
-    dialog.hostElement = hostElement;
-    dialog.component = component;
-};
-export const unmountDialog = (dialog) => {
-    if (dialog.hostElement && dialog.component) {
-        unmount(dialog.component);
-        dialog.hostElement.remove();
-    }
-};

package/dist/ui/dialog/dialogs.svelte.d.ts

@@ -1,16 +0,0 @@
-import { type AnyDialogData, type DialogInit } from './dialog-data';
-import { type DialogResult } from './types.svelte';
-export declare class DialogsContainer {
-    private _dialogs;
-    private _mountModule;
-    private _savedOverflow;
-    get all(): ReadonlyArray<AnyDialogData>;
-    get active(): AnyDialogData | null;
-    get count(): number;
-    open: <TData = void, TResult = void, TCancelResult = void>(init: DialogInit<TData, TResult, TCancelResult>, id?: number) => Promise<DialogResult<TResult, TCancelResult>>;
-    close: (id: number) => void;
-    closeAll: () => void;
-    private lockBodyScroll;
-    private unlockBodyScroll;
-}
-export declare const Dialogs: DialogsContainer;

package/dist/ui/dialog/dialogs.svelte.js

@@ -1,86 +0,0 @@
-import { isBrowser } from '../../core/utils/browser';
-import { DialogController } from './dialog-controller';
-import {} from './dialog-data';
-import {} from './types.svelte';
-export class DialogsContainer {
-    _dialogs = $state.raw([]);
-    _mountModule = null;
-    _savedOverflow = null;
-    get all() {
-        return this._dialogs;
-    }
-    get active() {
-        return this._dialogs.length > 0 ? this._dialogs[this._dialogs.length - 1] : null;
-    }
-    get count() {
-        return this._dialogs.length;
-    }
-    open = async (init, id = Math.random()) => {
-        if (!this._mountModule) {
-            this._mountModule = await import('./dialog-mount');
-        }
-        const { view, data, explicitSettings, containerSettings, host } = init;
-        const controller = new DialogController({
-            id,
-            onClose: () => {
-                const dialog = this._dialogs.find((d) => d.id === id);
-                if (dialog) {
-                    this._mountModule?.unmountDialog(dialog);
-                    this._dialogs = this._dialogs.filter((d) => d.id !== id);
-                    if (this._dialogs.length === 0) {
-                        this.unlockBodyScroll();
-                    }
-                }
-            },
-            settings: explicitSettings,
-            containerSettings
-        });
-        const newDialog = {
-            id,
-            view,
-            data,
-            controller
-        };
-        this._dialogs = [...this._dialogs, newDialog];
-        this.lockBodyScroll();
-        this._mountModule.mountDialog(newDialog, host);
-        return controller.openedPromise;
-    };
-    close = (id) => {
-        const dialog = this._dialogs.find((d) => d.id === id);
-        if (dialog) {
-            dialog.controller.cancel();
-        }
-    };
-    closeAll = () => {
-        const dialogsCopy = [...this._dialogs].reverse();
-        for (const dialog of dialogsCopy) {
-            dialog.controller.cancel();
-        }
-    };
-    lockBodyScroll = () => {
-        if (this._savedOverflow !== null) {
-            return;
-        }
-        this._savedOverflow = document.documentElement.style.overflow;
-        document.documentElement.style.overflow = 'hidden';
-    };
-    unlockBodyScroll = () => {
-        if (this._savedOverflow === null) {
-            return;
-        }
-        document.documentElement.style.overflow = this._savedOverflow;
-        this._savedOverflow = null;
-    };
-}
-const createDialogsSingleton = () => {
-    if (!isBrowser()) {
-        return new DialogsContainer();
-    }
-    // Use Vite's HMR data to preserve instance across hot reloads
-    if (import.meta.hot) {
-        return (import.meta.hot.data.dialogs ??= new DialogsContainer());
-    }
-    return new DialogsContainer();
-};
-export const Dialogs = createDialogsSingleton();

package/dist/ui/dropdown/cmp.dropdown-item.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">import { dropdownIgnore } from './dropdown-ignore';
-let { disabled = false, keepDropdownOpen = false, on, children } = $props();
-const handleClick = () => {
-    on?.click?.();
-};
-</script>
-
-<div
-  class="dropdown-item"
-  use:dropdownIgnore={keepDropdownOpen}
-  class:dropdown-item--disabled={disabled}
-  onclick={handleClick}
-  onkeydown={() => ({})}
-  role="none">
-  <div class="dropdown-item__content">
-    {@render children()}
-  </div>
-</div>
-
-<!--
-@component
-A single item within a dropdown menu. Supports hover state, disabled state, and separator lines between items.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--dropdown-item--min-width` | Minimum item width | `max-content` |
-| `--sc-kit--dropdown-item--font-size` | Content font size | `0.875rem` |
-| `--sc-kit--dropdown-item--padding` | Item padding | `0.625rem 0.875rem` |
-| `--sc-kit--dropdown-item--color` | Text color | light-dark gray-800/white |
-| `--sc-kit--dropdown-item--color--hover` | Text color on hover | light-dark gray-800/white |
-| `--sc-kit--dropdown-item--color--disabled` | Text color when disabled | light-dark neutral-400/neutral-500 |
-| `--sc-kit--dropdown-item--background` | Background color | light-dark white/gray-900 |
-| `--sc-kit--dropdown-item--background--hover` | Background on hover | light-dark neutral-100/neutral-800 |
-| `--sc-kit--dropdown-item--separator-color` | Separator line color | light-dark neutral-200/neutral-700 |
-| `--sc-kit--dropdown-item--separator-indent` | Separator horizontal indent | `0.875rem` |
-| `--sc-kit--dropdown-item--text-align` | Text alignment | `left` |
-| `--sc-kit--dropdown-item--border-radius` | Item border radius | `0` |
--->
-
-<style>.dropdown-item {
-  --_dropdown-item--min-width: var(--sc-kit--dropdown-item--min-width, max-content);
-  --_dropdown-item--font-size: var(--sc-kit--dropdown-item--font-size, 0.875rem);
-  --_dropdown-item--padding: var(--sc-kit--dropdown-item--padding, 0.625rem 0.875rem);
-  --_dropdown-item--color: var(--sc-kit--dropdown-item--color, light-dark(#2e2e2e, #ffffff));
-  --_dropdown-item--color--hover: var(--sc-kit--dropdown-item--color--hover, light-dark(#2e2e2e, #ffffff));
-  --_dropdown-item--color--disabled: var(--sc-kit--dropdown-item--color--disabled, light-dark(#9ca3af, #6b7280));
-  --_dropdown-item--background: var(--sc-kit--dropdown-item--background, light-dark(#ffffff, #1c1c1c));
-  --_dropdown-item--background--hover: var(
-    --sc-kit--dropdown-item--background--hover,
-    light-dark(#f2f2f3, #1f2937)
-  );
-  --_dropdown-item--separator-color: var(--sc-kit--dropdown-item--separator-color, light-dark(#e5e7eb, #374151));
-  --_dropdown-item--text-align: var(--sc-kit--dropdown-item--text-align, left);
-  --_dropdown-item--border-radius: var(--sc-kit--dropdown-item--border-radius, 0);
-  --_dropdown-item--separator-indent: var(--sc-kit--dropdown-item--separator-indent, 0.875rem);
-  cursor: pointer;
-  color: var(--_dropdown-item--color);
-  min-width: var(--_dropdown-item--min-width);
-  position: relative;
-  text-align: var(--_dropdown-item--text-align);
-  background: var(--_dropdown-item--background);
-  border-radius: var(--_dropdown-item--border-radius);
-  display: flex;
-  align-items: center;
-  padding: var(--_dropdown-item--padding);
-}
-.dropdown-item__content {
-  font-size: var(--_dropdown-item--font-size);
-  line-height: 1.2;
-  flex: 1;
-}
-.dropdown-item:before {
-  content: "";
-  display: block;
-  width: calc(100% - 2 * var(--_dropdown-item--separator-indent));
-  height: 1px;
-  background: var(--_dropdown-item--separator-color);
-  position: absolute;
-  bottom: 0;
-  left: var(--_dropdown-item--separator-indent);
-}
-.dropdown-item:last-child:before {
-  display: none;
-}
-.dropdown-item:hover {
-  color: var(--_dropdown-item--color--hover);
-  background: var(--_dropdown-item--background--hover);
-}
-.dropdown-item--disabled {
-  color: var(--_dropdown-item--color--disabled);
-  pointer-events: none;
-}</style>

package/dist/ui/dropdown/cmp.dropdown-item.svelte.d.ts

@@ -1,32 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    disabled?: boolean;
-    /** Prevent dropdown from closing on click */
-    keepDropdownOpen?: boolean;
-    on?: {
-        click?: () => void;
-    };
-    children: Snippet;
-};
-/**
- * A single item within a dropdown menu. Supports hover state, disabled state, and separator lines between items.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--dropdown-item--min-width` | Minimum item width | `max-content` |
- * | `--sc-kit--dropdown-item--font-size` | Content font size | `0.875rem` |
- * | `--sc-kit--dropdown-item--padding` | Item padding | `0.625rem 0.875rem` |
- * | `--sc-kit--dropdown-item--color` | Text color | light-dark gray-800/white |
- * | `--sc-kit--dropdown-item--color--hover` | Text color on hover | light-dark gray-800/white |
- * | `--sc-kit--dropdown-item--color--disabled` | Text color when disabled | light-dark neutral-400/neutral-500 |
- * | `--sc-kit--dropdown-item--background` | Background color | light-dark white/gray-900 |
- * | `--sc-kit--dropdown-item--background--hover` | Background on hover | light-dark neutral-100/neutral-800 |
- * | `--sc-kit--dropdown-item--separator-color` | Separator line color | light-dark neutral-200/neutral-700 |
- * | `--sc-kit--dropdown-item--separator-indent` | Separator horizontal indent | `0.875rem` |
- * | `--sc-kit--dropdown-item--text-align` | Text alignment | `left` |
- * | `--sc-kit--dropdown-item--border-radius` | Item border radius | `0` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;