@casinogate/ui 1.11.14 → 2.0.1

package/dist/primitives/pill/components/pill.item.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { box } from 'svelte-toolbelt';
+
+  import { PillGroupContext, PillItemContext, pillItemVariants } from '../styles.js';
+  import type { PillItemProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = 'soft',
+    color = 'neutral',
+    rounded = 'full',
+    size,
+    disabled = false,
+    ...restProps
+  }: PillItemProps = $props();
+
+  const group = PillGroupContext.getOr(undefined);
+
+  const resolvedSize = $derived(size ?? group?.current.size ?? 'sm');
+  const resolvedDisabled = $derived(disabled || group?.current.disabled || false);
+
+  const itemContext = $derived({ size: resolvedSize, disabled: resolvedDisabled });
+
+  PillItemContext.set(box.with(() => itemContext));
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="pill-item"
+  data-disabled={resolvedDisabled ? '' : undefined}
+  class={cn(
+    pillItemVariants({ variant, color, rounded, size: resolvedSize, disabled: resolvedDisabled }),
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

package/dist/primitives/pill/components/pill.item.svelte.d.ts

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

package/dist/primitives/pill/components/pill.label.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+
+  import { PillItemContext, pillLabelVariants } from '../styles.js';
+  import type { PillLabelProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size,
+    ...restProps
+  }: PillLabelProps = $props();
+
+  const item = PillItemContext.getOr(undefined);
+
+  const resolvedSize = $derived(size ?? item?.current.size ?? 'sm');
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="pill-label"
+  class={cn(pillLabelVariants({ size: resolvedSize }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

package/dist/primitives/pill/components/pill.label.svelte.d.ts

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

package/dist/primitives/pill/components/pill.remove.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
+
+  import { PillItemContext, pillRemoveVariants } from '../styles.js';
+  import type { PillRemoveProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size,
+    disabled,
+    'aria-label': ariaLabel = 'Remove',
+    ...restProps
+  }: PillRemoveProps = $props();
+
+  const item = PillItemContext.getOr(undefined);
+
+  const resolvedSize = $derived(size ?? item?.current.size ?? 'sm');
+  const resolvedDisabled = $derived(disabled ?? item?.current.disabled ?? false);
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  data-slot="pill-remove"
+  disabled={resolvedDisabled}
+  aria-label={ariaLabel}
+  class={cn(pillRemoveVariants({ size: resolvedSize }), className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <Icon.Cross />
+  {/if}
+</button>

package/dist/primitives/pill/components/pill.remove.svelte.d.ts

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

package/dist/primitives/pill/index.d.ts

@@ -0,0 +1,2 @@
+export * as Pill from './components/index.js';
+export type * from './types.js';

package/dist/primitives/pill/index.js

@@ -0,0 +1 @@
+export * as Pill from './components/index.js';

package/dist/primitives/pill/styles.d.ts

@@ -0,0 +1,170 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+type PillSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type PillRounded = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type PillVariant = 'fill' | 'outline' | 'soft';
+type PillColor = 'neutral' | 'destructive' | 'warning' | 'success' | 'info';
+export declare const pillGroupVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const pillItemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        fill: never[];
+        outline: string[];
+        soft: string[];
+    };
+    color: {
+        neutral: never[];
+        destructive: never[];
+        warning: never[];
+        success: never[];
+        info: never[];
+    };
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        fill: never[];
+        outline: string[];
+        soft: string[];
+    };
+    color: {
+        neutral: never[];
+        destructive: never[];
+        warning: never[];
+        success: never[];
+        info: never[];
+    };
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        fill: never[];
+        outline: string[];
+        soft: string[];
+    };
+    color: {
+        neutral: never[];
+        destructive: never[];
+        warning: never[];
+        success: never[];
+        info: never[];
+    };
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const pillLabelVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: never[];
+        sm: never[];
+        md: never[];
+        lg: never[];
+        xl: never[];
+    };
+}, undefined, string[], {
+    size: {
+        xs: never[];
+        sm: never[];
+        md: never[];
+        lg: never[];
+        xl: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: never[];
+        sm: never[];
+        md: never[];
+        lg: never[];
+        xl: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const pillRemoveVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+}, undefined, string[], {
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type PillItemVariants = VariantProps<typeof pillItemVariants>;
+export type PillGroupVariants = VariantProps<typeof pillGroupVariants>;
+export type PillLabelVariants = VariantProps<typeof pillLabelVariants>;
+export type PillRemoveVariants = VariantProps<typeof pillRemoveVariants>;
+export type { PillColor, PillRounded, PillSize, PillVariant };
+export type PillGroupContextValue = {
+    size: PillSize | undefined;
+    disabled: boolean | undefined;
+};
+export declare const PillGroupContext: Context<ReadableBox<PillGroupContextValue>>;
+export type PillItemContextValue = {
+    size: PillSize;
+    disabled: boolean;
+};
+export declare const PillItemContext: Context<ReadableBox<PillItemContextValue>>;

package/dist/primitives/pill/styles.js

@@ -0,0 +1,184 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const pillGroupVariants = tv({
+    base: ['cgui:inline-flex cgui:flex-wrap cgui:items-center cgui:gap-1.5'],
+});
+export const pillItemVariants = tv({
+    base: [
+        '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:max-w-full',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:select-none cgui:font-normal cgui:text-caption-2',
+        'cgui:[&>svg]:pointer-events-none',
+    ],
+    variants: {
+        variant: {
+            fill: [],
+            outline: ['cgui:border'],
+            soft: ['cgui:border'],
+        },
+        color: {
+            neutral: [],
+            destructive: [],
+            warning: [],
+            success: [],
+            info: [],
+        },
+        rounded: {
+            none: [],
+            xs: ['cgui:rounded-xs'],
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+        },
+        size: {
+            xs: [
+                'cgui:text-caption-2 cgui:h-4.5',
+                'cgui:px-1.5',
+                'cgui:[&>svg]:size-3.5',
+                'cgui:has-[[data-slot=pill-remove]]:pr-1',
+            ],
+            sm: [
+                'cgui:text-caption cgui:h-5.5',
+                'cgui:px-2',
+                'cgui:[&>svg]:size-4',
+                'cgui:has-[[data-slot=pill-remove]]:pr-1',
+            ],
+            md: [
+                'cgui:text-body-2 cgui:h-6',
+                'cgui:px-2.5',
+                'cgui:[&>svg]:size-4.5',
+                'cgui:has-[[data-slot=pill-remove]]:pr-2',
+            ],
+            lg: ['cgui:text-body cgui:h-6.5', 'cgui:px-3', 'cgui:[&>svg]:size-5', 'cgui:has-[[data-slot=pill-remove]]:pr-2'],
+            xl: [
+                'cgui:text-heading-2 cgui:h-7',
+                'cgui:px-3.5',
+                'cgui:[&>svg]:size-5.5',
+                'cgui:has-[[data-slot=pill-remove]]:pr-2.5',
+            ],
+        },
+        disabled: {
+            true: ['cgui:opacity-50 cgui:cursor-not-allowed'],
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'fill',
+            color: 'neutral',
+            class: ['cgui:bg-surface-regular cgui:text-fg-semilight'],
+        },
+        {
+            variant: 'soft',
+            color: 'neutral',
+            class: ['cgui:bg-surface-light/50 cgui:border-stroke-default cgui:text-fg-darkest'],
+        },
+        {
+            variant: 'outline',
+            color: 'neutral',
+            class: ['cgui:bg-transparent cgui:border-stroke-default cgui:text-fg-darkest'],
+        },
+        {
+            variant: 'fill',
+            color: 'destructive',
+            class: ['cgui:bg-state-error cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'destructive',
+            class: ['cgui:bg-state-error-light cgui:border-stroke-error cgui:text-fg-error'],
+        },
+        {
+            variant: 'outline',
+            color: 'destructive',
+            class: ['cgui:bg-transparent cgui:border-stroke-error cgui:text-fg-error'],
+        },
+        {
+            variant: 'fill',
+            color: 'warning',
+            class: ['cgui:bg-state-warning cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: ['cgui:bg-state-warning-light cgui:border-stroke-warning cgui:text-fg-warning'],
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: ['cgui:bg-transparent cgui:border-stroke-warning cgui:text-fg-warning'],
+        },
+        {
+            variant: 'fill',
+            color: 'success',
+            class: ['cgui:bg-state-success cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: ['cgui:bg-state-success-light cgui:border-stroke-success cgui:text-fg-success'],
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: ['cgui:bg-transparent cgui:border-stroke-success cgui:text-fg-success'],
+        },
+        {
+            variant: 'fill',
+            color: 'info',
+            class: ['cgui:bg-state-info cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: ['cgui:bg-state-info-light cgui:border-stroke-info cgui:text-state-info'],
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: ['cgui:bg-transparent cgui:border-state-info cgui:text-fg-darkest'],
+        },
+    ],
+    defaultVariants: {
+        variant: 'soft',
+        color: 'neutral',
+        rounded: 'full',
+        size: 'sm',
+        disabled: false,
+    },
+});
+export const pillLabelVariants = tv({
+    base: ['cgui:inline-flex cgui:items-center cgui:min-w-0', 'cgui:truncate cgui:cursor-[inherit]'],
+    variants: {
+        size: {
+            xs: [],
+            sm: [],
+            md: [],
+            lg: [],
+            xl: [],
+        },
+    },
+});
+export const pillRemoveVariants = tv({
+    base: [
+        'cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0',
+        'cgui:rounded-full cgui:cursor-pointer cgui:outline-none',
+        'cgui:transition-colors cgui:duration-150 cgui:ease-in-out',
+        'cgui:bg-transparent cgui:text-inherit',
+        'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:hover:bg-transparent',
+        'cgui:[&>svg]:pointer-events-none cgui:[&>svg:not([class*="size"])]:size-[80%]',
+    ],
+    variants: {
+        size: {
+            xs: ['cgui:size-4'],
+            sm: ['cgui:size-4.5'],
+            md: ['cgui:size-5'],
+            lg: ['cgui:size-5.5'],
+            xl: ['cgui:size-6'],
+        },
+    },
+});
+export const PillGroupContext = new Context(keyWithPrefix('pill-group'));
+export const PillItemContext = new Context(keyWithPrefix('pill-item'));

package/dist/primitives/pill/types.d.ts

@@ -0,0 +1,16 @@
+import type { WithVariants } from '../../internal/types/composition.js';
+import type { PrimitiveButtonAttributes, PrimitiveDivAttributes, PrimitiveSpanAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { PillItemVariants, PillLabelVariants, PillRemoveVariants } from './styles.js';
+type PillItemPropsWithoutHTML = WithElementRef<WithChildren<WithVariants<{}, PillItemVariants>>, HTMLSpanElement>;
+export type PillItemProps = PillItemPropsWithoutHTML & Without<PrimitiveSpanAttributes, PillItemPropsWithoutHTML>;
+type PillGroupPropsWithoutHTML = WithElementRef<WithChildren<{
+    size?: PillItemVariants['size'];
+    disabled?: boolean;
+}>, HTMLDivElement>;
+export type PillGroupProps = PillGroupPropsWithoutHTML & Without<PrimitiveDivAttributes, PillGroupPropsWithoutHTML>;
+type PillLabelPropsWithoutHTML = WithElementRef<WithChildren<WithVariants<{}, PillLabelVariants>>, HTMLSpanElement>;
+export type PillLabelProps = PillLabelPropsWithoutHTML & Without<PrimitiveSpanAttributes, PillLabelPropsWithoutHTML>;
+type PillRemovePropsWithoutHTML = WithElementRef<WithChildren<WithVariants<{}, PillRemoveVariants>>, HTMLButtonElement>;
+export type PillRemoveProps = PillRemovePropsWithoutHTML & Without<PrimitiveButtonAttributes, PillRemovePropsWithoutHTML>;
+export {};

package/dist/primitives/pill/types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Content } from './popover.content.svelte';
+export { default as Root } from './popover.root.svelte';
+export { default as Trigger } from './popover.trigger.svelte';
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;

package/dist/primitives/popover/components/index.js

@@ -0,0 +1,5 @@
+import { Popover as PopoverPrimitiveBits } from 'bits-ui';
+export { default as Content } from './popover.content.svelte';
+export { default as Root } from './popover.root.svelte';
+export { default as Trigger } from './popover.trigger.svelte';
+export const Portal = PopoverPrimitiveBits.Portal;

package/dist/primitives/popover/components/popover.content.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { popoverContentVariants } from '../styles.js';
+  import type { PrimitivePopoverContentProps } from '../types.js';
+  import { PopoverContentState } from './popover.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = useId(uid),
+    class: className,
+    side = 'bottom',
+    sideOffset = 8,
+    align = 'center',
+    shadow = true,
+    variant = 'default',
+    w = 'default',
+    rounded = 'default',
+    ...restProps
+  }: PrimitivePopoverContentProps = $props();
+
+  const contentState = PopoverContentState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+<PopoverPrimitive.Content
+  class={cn(popoverContentVariants({ shadow, variant, w, rounded }), className)}
+  {side}
+  {sideOffset}
+  {align}
+  {...mergedProps}
+/>

package/dist/primitives/popover/components/popover.content.svelte.d.ts

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

package/dist/primitives/popover/components/popover.root.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { noop } from '../../../internal/utils/common.js';
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+  import { boxWith } from 'svelte-toolbelt';
+  import type { PrimitivePopoverRootProps } from '../types.js';
+  import { PopoverRootState } from './popover.svelte.js';
+
+  let {
+    open = $bindable(false),
+    disabled = false,
+    onOpenChange = noop,
+    ...restProps
+  }: PrimitivePopoverRootProps = $props();
+
+  const rootState = PopoverRootState.create({
+    open: boxWith(
+      () => open,
+      (v) => {
+        open = v;
+        onOpenChange?.(v);
+      }
+    ),
+    disabled: boxWith(() => disabled),
+  });
+</script>
+
+<PopoverPrimitive.Root bind:open={rootState.opts.open.current} {...restProps} />

package/dist/primitives/popover/components/popover.root.svelte.d.ts

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

package/dist/primitives/popover/components/popover.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { RefAttachment } from '../../../internal/types/common.js';
+import { type ReadableBoxedValues, type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
+type PopoverRootStateOpts = WritableBoxedValues<{
+    open: boolean;
+}> & ReadableBoxedValues<{
+    disabled: boolean;
+}>;
+export declare class PopoverRootState {
+    static create(opts: PopoverRootStateOpts): PopoverRootState;
+    readonly opts: PopoverRootStateOpts;
+    constructor(opts: PopoverRootStateOpts);
+}
+type PopoverTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
+    disabled: boolean;
+}>>;
+export declare class PopoverTriggerState {
+    static create(opts: PopoverTriggerStateOpts): PopoverTriggerState;
+    readonly opts: PopoverTriggerStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: PopoverRootState;
+    readonly trueDisabled: boolean;
+    constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "trigger";
+        readonly disabled: boolean;
+        readonly 'data-disabled': "" | undefined;
+    };
+}
+type PopoverContentStateOpts = WithRefProps<{}>;
+export declare class PopoverContentState {
+    static create(opts: PopoverContentStateOpts): PopoverContentState;
+    readonly opts: PopoverContentStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverContentStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "content";
+    };
+}
+export {};