@casinogate/ui 1.9.2 → 1.9.5

package/dist/components/command/components/command.root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandRootProps } from '../types.js';
+declare const Command: import("svelte").Component<CommandRootProps, {}, "value" | "ref" | "api">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.viewport.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { CommandViewportProps } from '../types.js';
+
+  let { ref = $bindable(null), ...restProps }: CommandViewportProps = $props();
+</script>
+
+<CommandPrimitive.Viewport bind:ref data-slot="command-viewport" {...restProps} />

package/dist/components/command/components/command.viewport.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const Command: import("svelte").Component<CommandPrimitive.ViewportProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/exports-primitive.d.ts

@@ -0,0 +1,12 @@
+import { Separator } from '../separator/index.js';
+export { default as Empty } from './components/command.empty.svelte';
+export { default as GroupHeading } from './components/command.group-heading.svelte';
+export { default as GroupItems } from './components/command.group-items.svelte';
+export { default as Group } from './components/command.group.svelte';
+export { default as Input } from './components/command.input.svelte';
+export { default as Item } from './components/command.item.svelte';
+export { default as List } from './components/command.list.svelte';
+export { default as Loading } from './components/command.loading.svelte';
+export { default as Root } from './components/command.root.svelte';
+export { default as Viewport } from './components/command.viewport.svelte';
+export { Separator };

package/dist/components/command/exports-primitive.js

@@ -0,0 +1,12 @@
+import { Separator } from '../separator/index.js';
+export { default as Empty } from './components/command.empty.svelte';
+export { default as GroupHeading } from './components/command.group-heading.svelte';
+export { default as GroupItems } from './components/command.group-items.svelte';
+export { default as Group } from './components/command.group.svelte';
+export { default as Input } from './components/command.input.svelte';
+export { default as Item } from './components/command.item.svelte';
+export { default as List } from './components/command.list.svelte';
+export { default as Loading } from './components/command.loading.svelte';
+export { default as Root } from './components/command.root.svelte';
+export { default as Viewport } from './components/command.viewport.svelte';
+export { Separator };

package/dist/components/command/exports.d.ts

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

package/dist/components/command/exports.js

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

package/dist/components/command/index.d.ts

@@ -0,0 +1,4 @@
+export * as CommandPrimitive from './exports-primitive.js';
+export * as Command from './exports.js';
+export * as CommandApi from './api/index.js';
+export * from './types.js';

package/dist/components/command/index.js

@@ -0,0 +1,4 @@
+export * as CommandPrimitive from './exports-primitive.js';
+export * as Command from './exports.js';
+export * as CommandApi from './api/index.js';
+export * from './types.js';

package/dist/components/command/styles.d.ts

@@ -0,0 +1,81 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const commandRootVariants: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        clean: string[];
+    };
+    border: {
+        true: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    defaultVariants: {
+        rounded: string;
+        shadow: boolean;
+    };
+}, undefined, string[], {
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        clean: string[];
+    };
+    border: {
+        true: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    defaultVariants: {
+        rounded: string;
+        shadow: boolean;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        clean: string[];
+    };
+    border: {
+        true: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    defaultVariants: {
+        rounded: string;
+        shadow: boolean;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandInputVariants: import("tailwind-variants").TVReturnType<{}, {
+    wrapper: string[];
+    icon: string[];
+    input: string[];
+}, undefined, {}, {
+    wrapper: string[];
+    icon: string[];
+    input: string[];
+}, import("tailwind-variants").TVReturnType<{}, {
+    wrapper: string[];
+    icon: string[];
+    input: string[];
+}, undefined, unknown, unknown, undefined>>;
+export declare const commandListVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandGroupVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandGroupHeadingVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandItemVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandEmptyVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type CommandRootVariantProps = VariantProps<typeof commandRootVariants>;
+export type CommandInputVariantProps = VariantProps<typeof commandInputVariants>;
+export type CommandListVariantProps = VariantProps<typeof commandListVariants>;
+export type CommandGroupVariantProps = VariantProps<typeof commandGroupVariants>;
+export type CommandGroupHeadingVariantProps = VariantProps<typeof commandGroupHeadingVariants>;
+export type CommandItemVariantProps = VariantProps<typeof commandItemVariants>;
+export type CommandEmptyVariantProps = VariantProps<typeof commandEmptyVariants>;

package/dist/components/command/styles.js

@@ -0,0 +1,69 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const commandRootVariants = tv({
+    base: ['cgui:text-fg-dark cgui:bg-surface-white cgui:flex cgui:size-full cgui:flex-col cgui:overflow-hidden'],
+    variants: {
+        rounded: {
+            default: ['cgui:rounded-md'],
+            sm: ['cgui:rounded-sm'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            clean: [''],
+        },
+        border: {
+            true: ['cgui:border cgui:border-stroke-default'],
+        },
+        shadow: {
+            true: ['cgui:shadow-popover'],
+        },
+        defaultVariants: {
+            rounded: 'default',
+            shadow: true,
+        },
+    },
+});
+export const commandInputVariants = tv({
+    slots: {
+        wrapper: [
+            'cgui:flex cgui:h-9 cgui:items-center cgui:gap-2 cgui:pe-8 cgui:ps-3',
+            'cgui:border-b cgui:border-stroke-divider cgui:rounded-inherit',
+        ],
+        icon: [
+            'cgui:shrink-0 cgui:size-4 cgui:flex cgui:items-center cgui:opacity-50 cgui:justify-center cgui:select-none',
+        ],
+        input: [
+            'cgui:flex cgui:h-10 cgui:items-center cgui:rounded-inherit cgui:py-2 cgui:px-0',
+            'cgui:outline-none cgui:bg-transparent cgui:shadow-none cgui:text-fg-dark cgui:border-none cgui:text-body',
+            'cgui:placeholder:text-fg-regular/70',
+            'cgui:focus-visible:ring-0 cgui:focus-visible:ring-offset-0',
+            'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        ],
+    },
+    variants: {},
+});
+export const commandListVariants = tv({
+    base: [
+        'cgui:scrollbar-thin cgui:scrollbar-thumb-surface-regular cgui:scrollbar-track-surface-lightest cgui:scrollbar-thumb-rounded-full cgui:scrollbar-track-rounded-full',
+        'cgui:max-h-75 cgui:scroll-py-1 cgui:overflow-y-auto cgui:overflow-x-hidden',
+    ],
+});
+export const commandGroupVariants = tv({
+    base: ['cgui:text-fg-dark cgui:p-1 cgui:overflow-hidden'],
+});
+export const commandGroupHeadingVariants = tv({
+    base: ['cgui:text-fg-semilight cgui:px-2 cgui:py-1.5 cgui:text-caption cgui:font-medium'],
+});
+export const commandItemVariants = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:gap-2 cgui:px-2 cgui:py-1.5',
+        'cgui:aria-selected:bg-surface-lightest cgui:aria-selected:text-fg-primary',
+        'cgui:cursor-default  cgui:text-body cgui:select-none cgui:outline-hidden cgui:rounded-xs',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:[&_svg:not([class*="text-"])]:text-muted-foreground cgui:relative',
+        'cgui:[&_kbd]:ml-auto',
+        'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:shrink-0 cgui:[&_svg:not([class*="size-"])]:size-4',
+    ],
+});
+export const commandEmptyVariants = tv({
+    base: ['cgui:py-6 cgui:text-center cgui:text-body'],
+});

package/dist/components/command/types.d.ts

@@ -0,0 +1,64 @@
+import type { ListCollection } from '../../internal/index.js';
+import { Command as CommandPrimitive } from 'bits-ui';
+import type { Component, Snippet } from 'svelte';
+import type { Without, WithoutChildrenOrChild } from 'svelte-toolbelt';
+import type { SeparatorProps } from '../separator/index.js';
+import type { CommandEmptyVariantProps, CommandGroupHeadingVariantProps, CommandGroupVariantProps, CommandInputVariantProps, CommandItemVariantProps, CommandListVariantProps, CommandRootVariantProps } from './styles.js';
+export type CommandRootApi = CommandPrimitive.Root;
+export type CommandRootProps = CommandPrimitive.RootProps & CommandRootVariantProps & {
+    api?: CommandRootApi | null;
+};
+export type CommandInputProps = CommandPrimitive.InputProps & CommandInputVariantProps;
+export type CommandListProps = CommandListVariantProps & Without<CommandPrimitive.ListProps, CommandListVariantProps>;
+export type CommandGroupProps = CommandPrimitive.GroupProps & CommandGroupVariantProps;
+export type CommandGroupHeadingProps = CommandPrimitive.GroupHeadingProps & CommandGroupHeadingVariantProps;
+export type CommandGroupItemsProps = CommandPrimitive.GroupItemsProps;
+export type CommandItemProps = CommandPrimitive.ItemProps & CommandItemVariantProps;
+export type CommandEmptyProps = CommandPrimitive.EmptyProps & CommandEmptyVariantProps;
+export type CommandSeparatorProps = SeparatorProps;
+export type CommandViewportProps = CommandPrimitive.ViewportProps;
+export type CommandLoadingProps = CommandPrimitive.LoadingProps;
+export type CommandItem = {
+    value: string;
+    label?: string;
+    keywords?: string[];
+    disabled?: boolean;
+    icon?: Component<{
+        width?: number;
+        height?: number;
+    }>;
+    shortcut?: string[];
+    class?: string;
+    /** Group key for grouping */
+    group?: string;
+    onSelect?: () => void;
+};
+export type CommandGroup = {
+    value: string;
+    label?: string;
+    order?: number;
+    separator?: boolean;
+};
+export type CommandCollectionOptions = {
+    items: CommandItem[];
+    groups?: CommandGroup[];
+    groupSort?: 'asc' | 'desc' | ((a: string, b: string) => number);
+};
+export type CommandCollection = ListCollection<CommandItem> & {
+    groups: CommandGroup[];
+};
+export type CommandProps = WithoutChildrenOrChild<CommandRootProps> & {
+    collection: CommandCollection;
+    placeholder?: string;
+    searchValue?: string;
+    listClass?: string;
+    viewportClass?: string;
+    item?: Snippet<[{
+        item: CommandItem;
+        props: Record<string, unknown>;
+    }]>;
+    empty?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | string;
+    maxContentHeight?: string;
+};

package/dist/components/command/types.js

@@ -0,0 +1 @@
+import { Command as CommandPrimitive } from 'bits-ui';

package/dist/components/icons/exports.d.ts

@@ -17,7 +17,9 @@ export { default as Error } from './error.svelte';
 export { default as EyeCrossed } from './eye-crossed.svelte';
 export { default as Eye } from './eye.svelte';
 export { default as Info } from './info.svelte';
+export { default as Magnifier } from './magnifier.svelte';
 export { default as Minus } from './minus.svelte';
+export { default as Plus } from './plus.svelte';
 export { default as SidebarToggle } from './sidebar-toggle.svelte';
 export { default as Slash } from './slash.svelte';
 export { default as Sort } from './sort.svelte';

package/dist/components/icons/exports.js

@@ -17,7 +17,9 @@ export { default as Error } from './error.svelte';
 export { default as EyeCrossed } from './eye-crossed.svelte';
 export { default as Eye } from './eye.svelte';
 export { default as Info } from './info.svelte';
+export { default as Magnifier } from './magnifier.svelte';
 export { default as Minus } from './minus.svelte';
+export { default as Plus } from './plus.svelte';
 export { default as SidebarToggle } from './sidebar-toggle.svelte';
 export { default as Slash } from './slash.svelte';
 export { default as Sort } from './sort.svelte';

package/dist/components/icons/magnifier.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
+  <path
+    d="M5.12241 15.3665C6.36939 16.6149 8.02996 17.3643 9.7913 17.4736C11.5526 17.5828 13.2932 17.0444 14.685 15.9598L19.4739 20.7473C19.6437 20.9113 19.8712 21.002 20.1073 21C20.3434 20.9979 20.5693 20.9032 20.7362 20.7363C20.9032 20.5694 20.9979 20.3436 21 20.1076C21.002 19.8715 20.9113 19.6441 20.7472 19.4743L15.9583 14.6868C17.0914 13.2331 17.6271 11.4019 17.4562 9.56689C17.2852 7.73184 16.4205 6.03109 15.0384 4.81149C13.6563 3.5919 11.8608 2.94532 10.0182 3.00363C8.17559 3.06193 6.42464 3.82073 5.12241 5.12526C4.44955 5.79759 3.91578 6.59586 3.55161 7.47448C3.18744 8.35309 3 9.29483 3 10.2459C3 11.1969 3.18744 12.1387 3.55161 13.0173C3.91578 13.8959 4.44955 14.6942 5.12241 15.3665ZM6.39574 6.40002C7.28596 5.51007 8.4573 4.95623 9.71019 4.83286C10.9631 4.70949 12.22 5.02421 13.2668 5.72341C14.3136 6.42261 15.0855 7.46303 15.451 8.6674C15.8165 9.87177 15.753 11.1656 15.2713 12.3284C14.7896 13.4912 13.9196 14.4511 12.8093 15.0445C11.6991 15.6379 10.4174 15.8281 9.18258 15.5827C7.94779 15.3373 6.83631 14.6714 6.03751 13.6986C5.23872 12.7258 4.80202 11.5063 4.80183 10.2477C4.79936 9.5325 4.93898 8.82395 5.2126 8.16314C5.48621 7.50233 5.88837 6.90242 6.39574 6.39822V6.40002Z"
+    fill={color}
+  />
+</svg>

package/dist/components/icons/magnifier.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Magnifier: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type Magnifier = ReturnType<typeof Magnifier>;
+export default Magnifier;

package/dist/components/icons/plus.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
+</script>
+
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
+  <path fill={color} d="M18 12.998h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5v-5a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2" />
+</svg>

package/dist/components/icons/plus.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Plus: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type Plus = ReturnType<typeof Plus>;
+export default Plus;

package/dist/components/index.d.ts

@@ -5,13 +5,17 @@ export * from './button-group/index.js';
 export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './collapsible/index.js';
+export * from './combobox/index.js';
+export * from './command/index.js';
 export * from './data-table/index.js';
 export * from './dialog/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';
+export * from './kbd/index.js';
 export * from './navigation/index.js';
+export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './segment/index.js';

package/dist/components/index.js

@@ -5,13 +5,17 @@ export * from './button-group/index.js';
 export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './collapsible/index.js';
+export * from './combobox/index.js';
+export * from './command/index.js';
 export * from './data-table/index.js';
 export * from './dialog/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';
+export * from './kbd/index.js';
 export * from './navigation/index.js';
+export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './segment/index.js';

package/dist/components/kbd/components/kbd.group.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { kbdGroupVariants } from '../styles.js';
+  import type { KbdGroupProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: KbdGroupProps = $props();
+</script>
+
+<kbd bind:this={ref} data-slot="kbd-group" class={cn(kbdGroupVariants(), className)} {...restProps}>
+  {@render children?.()}
+</kbd>

package/dist/components/kbd/components/kbd.group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { KbdGroupProps } from '../types.js';
+declare const Kbd: import("svelte").Component<KbdGroupProps, {}, "ref">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/kbd/components/kbd.root.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { kbdRootVariants } from '../styles.js';
+  import type { KbdRootProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: KbdRootProps = $props();
+</script>
+
+<kbd
+  bind:this={ref}
+  data-slot="kbd"
+  class={cn(
+    kbdRootVariants(),
+
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</kbd>

package/dist/components/kbd/components/kbd.root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { KbdRootProps } from '../types.js';
+declare const Kbd: import("svelte").Component<KbdRootProps, {}, "ref">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/kbd/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Group } from './components/kbd.group.svelte';
+export { default as Root } from './components/kbd.root.svelte';

package/dist/components/kbd/exports.js

@@ -0,0 +1,2 @@
+export { default as Group } from './components/kbd.group.svelte';
+export { default as Root } from './components/kbd.root.svelte';

package/dist/components/kbd/index.d.ts

@@ -0,0 +1,2 @@
+export * as Kbd from './exports.js';
+export * from './types.js';

package/dist/components/kbd/index.js

@@ -0,0 +1,2 @@
+export * as Kbd from './exports.js';
+export * from './types.js';

package/dist/components/kbd/styles.d.ts

@@ -0,0 +1,5 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const kbdRootVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const kbdGroupVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type KbdRootVariantProps = VariantProps<typeof kbdRootVariants>;
+export type KbdGroupVariantProps = VariantProps<typeof kbdGroupVariants>;

package/dist/components/kbd/styles.js

@@ -0,0 +1,12 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const kbdRootVariants = tv({
+    base: [
+        'cgui:px-1 cgui:min-w-5 cgui:h-5 cgui:w-fit',
+        'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:text-center cgui:overflow-hidden cgui:shrink-0 cgui:w-fit cgui:whitespace-nowrap',
+        'cgui:bg-surface-regular cgui:text-fg-white cgui:pointer-events-none cgui:font-sans cgui:text-caption cgui:font-normal cgui:select-none cgui:rounded-xs cgui:border cgui:border-stroke-default',
+        'cgui:[&_svg:not([class*="size-"])]:size-3',
+    ],
+});
+export const kbdGroupVariants = tv({
+    base: ['cgui:inline-flex cgui:items-center cgui:gap-1'],
+});

package/dist/components/kbd/types.d.ts

@@ -0,0 +1,8 @@
+import type { PrimitiveElementAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { KbdGroupVariantProps, KbdRootVariantProps } from './styles.js';
+type KbdRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & KbdRootVariantProps;
+export type KbdRootProps = KbdRootPropsWithoutHTML & Without<PrimitiveElementAttributes, KbdRootPropsWithoutHTML>;
+type KbdGroupPropsWithoutHTML = WithElementRef<WithChildren<{}>> & KbdGroupVariantProps;
+export type KbdGroupProps = KbdGroupPropsWithoutHTML & Without<PrimitiveElementAttributes, KbdGroupPropsWithoutHTML>;
+export {};

package/dist/components/kbd/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/number-input/components/number-input.root.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { untrack } from 'svelte';
+  import { boxWith } from 'svelte-toolbelt';
+  import { ButtonGroupPrimitive } from '../../button-group/index.js';
+  import { Button } from '../../button/index.js';
+  import { Icon } from '../../icons/index.js';
+  import { Input } from '../../input/index.js';
+  import type { NumberInputProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    min = 0,
+    max = Infinity,
+    step = 1,
+    allowFloat = false,
+    class: className,
+    containerClass,
+    ...restProps
+  }: NumberInputProps = $props();
+
+  const onlyNumberPattern = $derived(allowFloat ? /^\d*\.?\d*$/ : /^\d*$/);
+
+  let internalValue = $state(value?.toString() ?? '');
+
+  $effect(() => {
+    const externalStr = value?.toString() ?? '';
+
+    untrack(() => {
+      if (parseFloat(internalValue) !== value) {
+        internalValue = externalStr;
+      }
+    });
+  });
+
+  let internalValueBox = boxWith(
+    () => internalValue,
+    (v) => {
+      if (!onlyNumberPattern.test(v)) return;
+
+      if (v === '') {
+        internalValue = '';
+        value = undefined;
+        return;
+      }
+
+      const vNum = parseFloat(v);
+
+      if (Number.isNaN(vNum)) {
+        internalValue = v;
+        return;
+      }
+
+      if (vNum > max) return;
+      if (vNum < min) return;
+
+      internalValue = v;
+      value = vNum;
+    }
+  );
+
+  const onPlusClick = () => {
+    const currentVal = internalValue ? parseFloat(internalValue) : 0;
+    const base = Number.isNaN(currentVal) ? 0 : currentVal;
+    const newValue = base + step;
+    if (newValue > max) return;
+    internalValueBox.current = newValue.toString();
+  };
+
+  const onMinusClick = () => {
+    const currentVal = internalValue ? parseFloat(internalValue) : 0;
+    const base = Number.isNaN(currentVal) ? 0 : currentVal;
+    const newValue = base - step;
+    if (newValue < min) return;
+    internalValueBox.current = newValue.toString();
+  };
+</script>
+
+<ButtonGroupPrimitive.Root class={cn('cgui:w-full', containerClass)}>
+  <Button
+    variant="clean"
+    w="clean"
+    class="cgui:border cgui:w-9 cgui:border-r-0 cgui:border-stroke-default cgui:text-fg-dark cgui:bg-surface-lightest"
+    size="clean"
+    onclick={onMinusClick}
+  >
+    <Icon.Minus width={16} height={16} />
+  </Button>
+
+  <Input bind:value={internalValueBox.current} class={cn('cgui:border-r cgui:border-l!', className)} {...restProps} />
+
+  <Button
+    variant="clean"
+    w="clean"
+    class="cgui:border cgui:w-9 cgui:border-stroke-default cgui:text-fg-dark cgui:bg-surface-lightest"
+    size="clean"
+    onclick={onPlusClick}
+  >
+    <Icon.Plus width={16} height={16} />
+  </Button>
+</ButtonGroupPrimitive.Root>

package/dist/components/number-input/components/number-input.root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NumberInputProps } from '../types.js';
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value" | "ref">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/number-input/exports.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './components/number-input.root.svelte';

package/dist/components/number-input/exports.js

@@ -0,0 +1 @@
+export { default as Root } from './components/number-input.root.svelte';

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,2 @@
+export * as NumberInput from './exports.js';
+export * from './types.js';

package/dist/components/number-input/index.js

@@ -0,0 +1,2 @@
+export * as NumberInput from './exports.js';
+export * from './types.js';

package/dist/components/number-input/types.d.ts

@@ -0,0 +1,9 @@
+import type { InputProps } from '../input/index.js';
+export type NumberInputProps = Omit<InputProps, 'value' | 'min' | 'max' | 'step' | 'type'> & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    allowFloat?: boolean;
+    containerClass?: string;
+};

package/dist/components/number-input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/popover/index.d.ts

@@ -1,3 +1,3 @@
 export * as PopoverPrimitive from './exports-primitive.js';
 export * from './exports.js';
-export type { AnimationDirection, AnimationFn, PopoverProps, PrimitivePopoverContentProps, PrimitivePopoverPortalProps, PrimitivePopoverRootProps, PrimitivePopoverTriggerProps, } from './types.js';
+export type * from './types.js';