@casinogate/ui 2.0.1 → 2.0.3

package/dist/primitives/date-picker/components/date-picker.trigger.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { boolAttr } from '../../../internal/utils/attrs.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { DatePicker as Primitive } from 'bits-ui';
+  import { datePickerTriggerVariants } from '../styles.js';
+  import type { DatePickerTriggerProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    child: childSnippet,
+    children,
+    hasChevron = true,
+    size = 'md',
+    variant = 'primary',
+    rounded = 'sm',
+    fullWidth = true,
+    ...restProps
+  }: DatePickerTriggerProps = $props();
+
+  const attrs = $derived({
+    'data-slot': 'trigger',
+    'data-has-chevron': boolAttr(hasChevron),
+    class: cn(
+      datePickerTriggerVariants({
+        size,
+        variant,
+        rounded,
+        fullWidth,
+        hasChevron,
+      }),
+      className
+    ),
+    ...restProps,
+  });
+</script>
+
+<Primitive.Trigger bind:ref {...attrs}>
+  {#snippet child({ props })}
+    {#if childSnippet}
+      {@render childSnippet({ props })}
+    {:else}
+      <button {...props}>
+        {@render children?.()}
+
+        {#if hasChevron}
+          <span
+            data-slot="chevron"
+            class={cn(
+              'cgui:absolute cgui:top-1/2 cgui:-translate-y-1/2 cgui:right-2',
+              'cgui:ms-auto cgui:text-fg-regular'
+            )}
+          >
+            <Icon.Calendar width={18} height={18} />
+          </span>
+        {/if}
+      </button>
+    {/if}
+  {/snippet}
+</Primitive.Trigger>

package/dist/primitives/date-picker/components/date-picker.trigger.svelte.d.ts

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

package/dist/primitives/date-picker/components/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Calendar } from './date-picker.calendar.svelte';
+export { default as Content } from './date-picker.content.svelte';
+export { default as Input } from './date-picker.input.svelte';
+export { default as Portal } from './date-picker.portal.svelte';
+export { default as Root } from './date-picker.root.svelte';
+export { default as Segment } from './date-picker.segment.svelte';
+export { default as Trigger } from './date-picker.trigger.svelte';

package/dist/primitives/date-picker/components/index.js

@@ -0,0 +1,7 @@
+export { default as Calendar } from './date-picker.calendar.svelte';
+export { default as Content } from './date-picker.content.svelte';
+export { default as Input } from './date-picker.input.svelte';
+export { default as Portal } from './date-picker.portal.svelte';
+export { default as Root } from './date-picker.root.svelte';
+export { default as Segment } from './date-picker.segment.svelte';
+export { default as Trigger } from './date-picker.trigger.svelte';

package/dist/primitives/date-picker/index.d.ts

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

package/dist/primitives/date-picker/index.js

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

package/dist/primitives/date-picker/styles.d.ts

@@ -0,0 +1,171 @@
+import { type VariantProps } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+import type { ReadableBoxedValues } from 'svelte-toolbelt';
+type DatePickerRounded = 'none' | 'xs' | 'sm' | 'md' | 'lg';
+export declare const datePickerTriggerVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasChevron: {
+        true: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasChevron: {
+        true: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasChevron: {
+        true: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const datePickerContentVariants: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const datePickerCalendarVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const datePickerInputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        none: never[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        none: never[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        none: never[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const datePickerSegmentVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type DatePickerTriggerVariants = Omit<VariantProps<typeof datePickerTriggerVariants>, 'hasChevron'>;
+export type DatePickerContentVariants = VariantProps<typeof datePickerContentVariants>;
+export type DatePickerCalendarVariants = VariantProps<typeof datePickerCalendarVariants>;
+export type DatePickerInputVariants = VariantProps<typeof datePickerInputVariants>;
+export type DatePickerSegmentVariants = VariantProps<typeof datePickerSegmentVariants>;
+export type { DatePickerRounded };
+export type DatePickerRootContextValue = ReadableBoxedValues<{
+    rounded: DatePickerRounded;
+}>;
+export declare const DatePickerRootStylesContext: Context<ReadableBoxedValues<{
+    rounded: DatePickerRounded;
+}>>;

package/dist/primitives/date-picker/styles.js

@@ -0,0 +1,143 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const datePickerTriggerVariants = tv({
+    base: [
+        'cgui:group/date-picker-trigger',
+        'cgui:relative cgui:inline-flex cgui:items-center cgui:gap-1',
+        'cgui:text-body',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
+        'cgui:has-[data-slot=chevron]:pr-3',
+        'cgui:[[data-slot=date-picker-input]_&]:bg-transparent!',
+        'cgui:[[data-slot=date-picker-input]_&]:w-auto!',
+        'cgui:[[data-slot=date-picker-input]_&]:border-0!',
+        'cgui:[[data-slot=date-picker-input]_&]:shadow-none!',
+        'cgui:[[data-slot=date-picker-input]_&]:min-h-0!',
+        'cgui:[[data-slot=date-picker-input]_&]:pl-4 cgui:[[data-slot=date-picker-input]_&]:pr-0 cgui:[[data-slot=date-picker-input]_&]:py-0!',
+        'cgui:[[data-slot=date-picker-input]_&]:rounded-none!',
+        'cgui:[[data-slot=date-picker-input]_&]:ms-auto!',
+        'cgui:[[data-slot=date-picker-input]_&]:text-fg-regular',
+        'cgui:[[data-slot=date-picker-input]_&]:hover:text-fg-dark',
+        'cgui:[[data-slot=date-picker-input]_&]:cursor-pointer',
+        'cgui:[[data-slot=date-picker-input]_&_[data-slot=chevron]]:relative!',
+        'cgui:[[data-slot=date-picker-input]_&_[data-slot=chevron]]:top-auto!',
+        'cgui:[[data-slot=date-picker-input]_&_[data-slot=chevron]]:right-auto!',
+        'cgui:[[data-slot=date-picker-input]_&_[data-slot=chevron]]:translate-y-0!',
+    ],
+    variants: {
+        variant: {
+            primary: [
+                'cgui:bg-surface-lightest cgui:border cgui:border-stroke-default',
+                'cgui:data-[placeholder]:text-fg-regular/70 cgui:text-fg-dark',
+            ],
+            outline: [
+                'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
+                'cgui:border-b cgui:border-b-stroke-default',
+                'cgui:rounded-none',
+            ],
+            clear: [],
+        },
+        size: {
+            sm: ['cgui:min-h-7.5', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[has-chevron]:pr-8'],
+            md: ['cgui:min-h-9', 'cgui:px-3 cgui:py-2', 'cgui:data-[has-chevron]:pr-10'],
+            lg: ['cgui:min-h-11', 'cgui:text-heading-2', 'cgui:px-4 cgui:py-2.5', 'cgui:data-[has-chevron]:pr-14'],
+        },
+        rounded: {
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+        },
+        hasChevron: {
+            true: [''],
+        },
+        fullWidth: {
+            true: ['cgui:w-full'],
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        rounded: 'sm',
+    },
+});
+export const datePickerContentVariants = tv({
+    base: [
+        'cgui:z-(--cg-ui-z-index-popover)',
+        'cgui:bg-surface-white cgui:shadow-popover cgui:p-4',
+        'cgui:origin-(--bits-popover-content-transform-origin) cgui:outline-hidden',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95',
+        'cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-end-2 cgui:data-[side=right]:slide-in-from-start-2 cgui:data-[side=top]:slide-in-from-bottom-2',
+    ],
+    variants: {
+        rounded: {
+            none: [],
+            xs: ['cgui:rounded-xs'],
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+        },
+    },
+    defaultVariants: {
+        rounded: 'md',
+    },
+});
+export const datePickerCalendarVariants = tv({
+    base: ['cgui:flex cgui:flex-col'],
+});
+export const datePickerInputVariants = tv({
+    base: [
+        'cgui:group/date-picker-input',
+        'cgui:relative cgui:inline-flex cgui:items-center cgui:gap-0.5 cgui:w-full',
+        'cgui:text-body',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:data-invalid:border-stroke-error cgui:data-invalid:ring-stroke-error',
+        'cgui:data-disabled:opacity-50 cgui:data-disabled:cursor-not-allowed',
+    ],
+    variants: {
+        variant: {
+            primary: [
+                'cgui:bg-surface-lightest cgui:border cgui:border-stroke-default cgui:text-fg-dark',
+                'cgui:focus-within:border-stroke-focus cgui:focus-within:ring-1 cgui:focus-within:ring-stroke-focus',
+            ],
+            outline: [
+                'cgui:border-b cgui:border-b-stroke-default cgui:text-fg-dark cgui:rounded-none',
+                'cgui:focus-within:border-b-stroke-focus',
+            ],
+            clear: [],
+        },
+        size: {
+            sm: ['cgui:min-h-7.5 cgui:px-2.5 cgui:py-1.5'],
+            md: ['cgui:min-h-9 cgui:px-3 cgui:py-2'],
+            lg: ['cgui:min-h-11 cgui:text-heading-2 cgui:px-4 cgui:py-2.5'],
+        },
+        rounded: {
+            none: [],
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+        },
+        fullWidth: {
+            true: ['cgui:w-full'],
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        rounded: 'sm',
+    },
+});
+export const datePickerSegmentVariants = tv({
+    base: [
+        'cgui:inline-flex cgui:items-center cgui:justify-center',
+        'cgui:rounded-xs cgui:px-0.5',
+        'cgui:outline-none',
+        'cgui:transition-colors cgui:duration-150 cgui:ease-in-out',
+        'cgui:focus:bg-surface-primary cgui:focus:text-fg-white',
+        'cgui:data-invalid:text-fg-error',
+        'cgui:data-disabled:text-fg-semilight/40 cgui:data-disabled:pointer-events-none',
+        'cgui:data-[segment=literal]:text-fg-semilight cgui:data-[segment=literal]:pointer-events-none',
+        'cgui:data-[placeholder]:text-fg-regular/60',
+    ],
+});
+export const DatePickerRootStylesContext = new Context(keyWithPrefix('date-picker-root-styles'));

package/dist/primitives/date-picker/types.d.ts

@@ -0,0 +1,14 @@
+import type { DatePicker as Primitive } from 'bits-ui';
+import type { DatePickerCalendarVariants, DatePickerContentVariants, DatePickerInputVariants, DatePickerSegmentVariants, DatePickerTriggerVariants } from './styles.js';
+import type { WithVariants } from '../../internal/utils/tailwindcss.js';
+export type DatePickerRootProps = WithVariants<Primitive.RootProps & {
+    children?: Primitive.RootProps['children'];
+}, DatePickerContentVariants>;
+export type DatePickerTriggerProps = Primitive.TriggerProps & DatePickerTriggerVariants & {
+    hasChevron?: boolean;
+};
+export type DatePickerContentProps = WithVariants<Primitive.ContentProps, DatePickerContentVariants>;
+export type DatePickerPortalProps = Primitive.PortalProps;
+export type DatePickerCalendarProps = WithVariants<Primitive.CalendarProps, DatePickerCalendarVariants>;
+export type DatePickerInputProps = WithVariants<Primitive.InputProps, DatePickerInputVariants>;
+export type DatePickerSegmentProps = WithVariants<Primitive.SegmentProps, DatePickerSegmentVariants>;

package/dist/primitives/date-picker/types.js

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

package/dist/primitives/select/styles.js

@@ -7,6 +7,9 @@ export const selectTriggerStyles = tv({
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
         'cgui:has-[data-slot=chevron]:pr-3',
+        'cgui:focus-visible:ring-stroke-primary/50 cgui:outline-none cgui:focus-visible:ring-2 cgui:bg-clip-padding',
+        'cgui:focus:ring-stroke-default cgui:focus-visible:border-stroke-focus',
+        'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
     ],
     variants: {
         variant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -492,6 +492,7 @@
     "node": ">=22.14.0"
   },
   "dependencies": {
+    "@internationalized/date": "^3.10.0",
     "@tanstack/table-core": "^8.21.3",
     "@zag-js/collection": "^1.30.0",
     "bits-ui": "2.16.3",