sheer-ui 0.0.0

package/src/lib/components/combobox/select/types.ts

@@ -0,0 +1,291 @@
+import type { Expand } from '../../../internal/tools/index.js';
+import type { PortalProps } from '../../../internal/portal/index.js';
+import type { PopperLayerProps, PopperLayerStaticProps } from '../../../internal/popper-layer/types.js';
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from '../../../internal/attribute-types.js';
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from '../../../internal/types.js';
+import type { Snippet } from 'svelte';
+import type { OpenCell } from '../../../internal/open-cell.svelte.js';
+import type { FloatingContentSnippetProps, StaticContentSnippetProps } from '../../../internal/types.js';
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+export type SelectSharedRootPropsWithoutHTML = {
+	/**
+	 * Whether the combobox is disabled.
+	 *
+	 * @defaultValue `false`
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Whether the combobox is required (for form submission).
+	 *
+	 * @defaultValue `false`
+	 */
+	required?: boolean;
+
+	/**
+	 * The name to apply to the hidden input element for form submission.
+	 * If not provided, a hidden input will not be rendered and the combobox will not be part of a form.
+	 */
+	name?: string;
+
+	/**
+	 * A callback function called when the open state changes and the animation is complete.
+	 */
+	onOpenChangeComplete?: OnChangeFn<boolean>;
+
+	/**
+	 * Whether or not the combobox menu should loop through the items when navigating with the keyboard.
+	 *
+	 * @defaultValue `false`
+	 */
+	loop?: boolean;
+
+	/**
+	 * How to scroll the combobox items into view when navigating with the keyboard.
+	 *
+	 * @defaultValue `"nearest"`
+	 */
+	scrollAlignment?: 'nearest' | 'center';
+
+	/**
+	 * Optionally provide an array of `value` and `label` pairs that will be used to match
+	 * and trigger selection when the trigger is focused and a key is pressed while the content
+	 * is closed. It's also used to handle form autofill.
+	 *
+	 * By providing this value, you enable selecting a value when the trigger is focused and a key
+	 * is pressed without the content being open, similar to how a native `<select>` works.
+	 * For this to work, you must
+	 *
+	 * The label is what the user will potentially search for via typeahead, and the value is what
+	 * is set as the selected value when a typeahead match is found.
+	 *
+	 * We can't rely on the individual `Item` components to do this because they may not ever be
+	 * mounted to do the DOM if using a conditional block with a Svelte transition or certain
+	 * animation libraries.
+	 *
+	 * IMPORTANT: This functionality is only available for single-select listboxes.
+	 */
+	items?: { value: string; label: string; disabled?: boolean }[];
+
+	/**
+	 * Whether to allow the user to deselect an item by clicking on an already selected item.
+	 * This is only applicable to `type="single"` selects/comboboxes.
+	 */
+	allowDeselect?: boolean;
+
+	/**
+	 * The autocomplete attribute to forward to the hidden input element.
+	 */
+	autocomplete?: HTMLInputAttributes['autocomplete'];
+};
+
+export type SelectBaseRootPropsWithoutHTML = SelectSharedRootPropsWithoutHTML & {
+	/**
+	 * The derivation source for the select's open state: the internal cell
+	 * re-derives whenever this prop changes, and interactions (trigger, Escape,
+	 * a snippet-cell write) override it until the next change. Reconcile
+	 * dismissals via onOpenChangeComplete. Plain value — not bindable.
+	 */
+	open?: boolean;
+
+	/**
+	 * A caller-constructed cell (own source and, optionally, a delegate writer)
+	 * used instead of building one from `open`. When given, `open` is ignored.
+	 */
+	state?: OpenCell;
+
+	/** Children receive the state cell, typed and guaranteed within the tree. */
+	children?: Snippet<[OpenCell]>;
+};
+
+export type SelectSingleRootPropsWithoutHTML = {
+	/**
+	 * The value of the selected combobox item.
+	 *
+	 * @bindable
+	 */
+	value?: string;
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
+
+	/**
+	 * The type of combobox.
+	 *
+	 * @required
+	 */
+	type: 'single';
+};
+
+export type SelectMultipleRootPropsWithoutHTML = {
+	/**
+	 * The value of the selected combobox item.
+	 *
+	 * @bindable
+	 */
+	value?: string[];
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<string[]>;
+
+	/**
+	 * The type of combobox.
+	 *
+	 * @required
+	 */
+	type: 'multiple';
+};
+
+export type SelectSingleRootProps = SelectBaseRootPropsWithoutHTML &
+	SelectSingleRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectSingleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+
+export type SelectMultipleRootProps = SelectBaseRootPropsWithoutHTML &
+	SelectMultipleRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectMultipleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+
+export type SelectRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML &
+	(SelectSingleRootPropsWithoutHTML | SelectMultipleRootPropsWithoutHTML);
+
+export type SelectRootProps = SelectRootPropsWithoutHTML;
+
+export type SelectValueSnippetProps = {
+	selection:
+		| {
+				type: 'single';
+				selected?: { value: string; label: string };
+				setValue: (value: string) => void;
+		  }
+		| {
+				type: 'multiple';
+				selected: { value: string; label: string }[];
+				setValue: (value: string[]) => void;
+		  };
+	placeholder: string | null;
+	disabled: boolean;
+};
+
+export type SelectValuePropsWithoutHTML = WithChild<{}, SelectValueSnippetProps>;
+
+export type SelectValueProps = SelectValuePropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SelectValuePropsWithoutHTML>;
+
+export type _SharedSelectContentProps = {
+	/**
+	 * Whether or not to loop through the items when navigating with the keyboard.
+	 *
+	 * @defaultValue `false`
+	 */
+	loop?: boolean;
+};
+
+export type SelectContentPropsWithoutHTML = Expand<
+	WithChildNoChildrenSnippetProps<
+		Omit<PopperLayerProps, 'content' | 'onOpenAutoFocus' | 'trapFocus' | 'onCloseAutoFocus'> & _SharedSelectContentProps,
+		FloatingContentSnippetProps
+	>
+>;
+
+export type SelectContentProps = SelectContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
+
+export type SelectContentStaticPropsWithoutHTML = Expand<
+	WithChildNoChildrenSnippetProps<
+		Omit<PopperLayerStaticProps, 'content' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'trapFocus'> & _SharedSelectContentProps,
+		StaticContentSnippetProps
+	>
+>;
+
+export type SelectContentStaticProps = SelectContentStaticPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectContentStaticPropsWithoutHTML>;
+
+export type SelectTriggerPropsWithoutHTML = WithChild;
+
+export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
+
+export type SelectItemSnippetProps = { selected: boolean; highlighted: boolean };
+
+export type SelectItemPropsWithoutHTML = WithChild<
+	{
+		/**
+		 * The value of the item.
+		 *
+		 * @required
+		 */
+		value: string;
+
+		/**
+		 * The label of the item. If provided, this is the item that users will search for.
+		 * If not provided, the value will be used as the label.
+		 */
+		label?: string;
+
+		/**
+		 * Whether the item is disabled.
+		 *
+		 * @defaultValue `false`
+		 */
+		disabled?: boolean;
+
+		/**
+		 * A callback function called when the item is highlighted. This can be used as a
+		 * replacement for `onfocus` since we don't actually focus the item and instead
+		 * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
+		 */
+		onHighlight?: () => void;
+
+		/**
+		 * A callback function called when the item is unhighlighted. This can be used as a
+		 * replacement for `onblur` since we don't actually focus the item and instead
+		 * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
+		 */
+		onUnhighlight?: () => void;
+	},
+	SelectItemSnippetProps
+>;
+
+export type SelectItemProps = SelectItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
+
+export type SelectGroupPropsWithoutHTML = WithChild;
+
+export type SelectGroupProps = SelectGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
+
+export type SelectGroupHeadingPropsWithoutHTML = WithChild;
+
+export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
+
+export type SelectSeparatorPropsWithoutHTML = WithChild;
+
+export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
+
+export type SelectPortalPropsWithoutHTML = PortalProps;
+
+export type SelectPortalProps = SelectPortalPropsWithoutHTML;
+
+export type SelectViewportPropsWithoutHTML = WithChild;
+
+export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
+
+export type SelectScrollButtonPropsWithoutHTML = WithChild<{
+	/**
+	 * Controls the initial delay (tick 0) and delay between auto-scrolls in milliseconds.
+	 * The default function always returns 50ms.
+	 *
+	 * @param tick current tick number
+	 */
+	delay?: (tick: number) => number;
+}>;
+
+export type SelectScrollUpButtonPropsWithoutHTML = SelectScrollButtonPropsWithoutHTML;
+
+export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
+
+export type SelectScrollDownButtonPropsWithoutHTML = SelectScrollButtonPropsWithoutHTML;
+
+export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;

package/src/lib/components/combobox/types.ts

@@ -0,0 +1,77 @@
+import type { BitsPrimitiveInputAttributes } from '../../internal/attribute-types.js';
+import type { LucideProps } from '@lucide/svelte';
+import type {
+	SelectBaseRootPropsWithoutHTML,
+	SelectMultipleRootPropsWithoutHTML,
+	SelectSingleRootPropsWithoutHTML,
+} from './select/types.js';
+import type { WithChild, Without } from '../../internal/types.js';
+
+export type ComboboxBaseRootPropsWithoutHTML = Omit<SelectBaseRootPropsWithoutHTML, 'autocomplete'> & {
+	/**
+	 * A read-only value that can be used to programmatically
+	 * update the input value.
+	 *
+	 * This is useful for updating the displayed label/input
+	 * when the value changes outside of Bits UI.
+	 */
+	inputValue?: string;
+};
+
+export type ComboboxSingleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectSingleRootPropsWithoutHTML;
+
+export type ComboboxSingleRootProps = ComboboxSingleRootPropsWithoutHTML;
+
+export type ComboboxMultipleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML;
+export type ComboboxMultipleRootProps = ComboboxMultipleRootPropsWithoutHTML;
+
+export type ComboboxRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML &
+	(ComboboxSingleRootPropsWithoutHTML | ComboboxMultipleRootPropsWithoutHTML);
+
+export type ComboboxRootProps = ComboboxRootPropsWithoutHTML;
+
+export type {
+	SelectContentProps as ComboboxContentProps,
+	SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML,
+	SelectContentStaticProps as ComboboxContentStaticProps,
+	SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML,
+	SelectItemProps as ComboboxItemProps,
+	SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML,
+	SelectItemSnippetProps as ComboboxItemSnippetProps,
+	SelectTriggerProps as ComboboxTriggerProps,
+	SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML,
+	SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML,
+	SelectGroupProps as ComboboxGroupProps,
+	SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML,
+	SelectGroupHeadingProps as ComboboxGroupHeadingProps,
+	SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML,
+	SelectViewportProps as ComboboxViewportProps,
+	SelectScrollDownButtonProps as ComboboxScrollDownButtonProps,
+	SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML,
+	SelectScrollUpButtonProps as ComboboxScrollUpButtonProps,
+	SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML,
+	SelectPortalProps as ComboboxPortalProps,
+	SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML,
+} from './select/types.js';
+
+export type ComboboxArrowPropsWithoutHTML = LucideProps;
+
+export type ComboboxArrowProps = ComboboxArrowPropsWithoutHTML;
+
+export type ComboboxInputPropsWithoutHTML = WithChild<{
+	/**
+	 * The default value of the input. This is not a reactive prop and is only used to populate
+	 * the input when the combobox is first mounted if there is already a value set.
+	 */
+	defaultValue?: string;
+
+	/**
+	 * Whether to clear the input when the last item is deselected.
+	 *
+	 * @default false
+	 */
+	clearOnDeselect?: boolean;
+}>;
+
+export type ComboboxInputProps = ComboboxInputPropsWithoutHTML &
+	Without<Omit<BitsPrimitiveInputAttributes, 'value'>, ComboboxInputPropsWithoutHTML>;

package/src/lib/components/command/command-dialog.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { DialogRootProps, DialogPortalProps } from "../dialog/types.js";
+	import type { CommandRootProps } from "./types.js";
+	import type { Snippet } from "svelte";
+	import Command from "./components/command.svelte";
+	import * as Dialog from "../dialog/index.js";
+	import type { WithoutChildrenOrChild } from "../../internal/utils.js";
+
+	let {
+		open = false,
+		ref = $bindable(null),
+		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogRootProps> &
+		WithoutChildrenOrChild<CommandRootProps> & {
+			portalProps?: DialogPortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+		} = $props();
+</script>
+
+<!-- Native <dialog> Dialog.Content promotes itself to the top layer, so the old Portal + Overlay
+     wrappers are gone (::backdrop dims). `portalProps` stays in the signature for API stability. -->
+<Dialog.Root {open} {...restProps}>
+	<Dialog.Content class="overflow-hidden p-0!">
+		<div class="sr-only">
+			<Dialog.Title>{title}</Dialog.Title>
+			<Dialog.Description>{description}</Dialog.Description>
+		</div>
+		<Command
+			class="**:data-[slot=command-input-wrapper]:h-12 **:data-command-group:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 **:data-command-input:h-12 **:data-command-item:px-2 **:data-command-item:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
+			bind:value
+			bind:ref
+			{children} />
+	</Dialog.Content>
+</Dialog.Root>