@casinogate/ui 2.0.2 → 2.0.4

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/index.d.ts

@@ -1,29 +1,31 @@
 export * from './app-shell/index.js';
-export * from './button/index.js';
 export * from './badge/index.js';
 export * from './breadcrumb/index.js';
 export * from './button-group/index.js';
+export * from './button/index.js';
+export * from './calendar/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './collapsible/index.js';
 export * from './combobox/index.js';
 export * from './command/index.js';
+export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
-export * from './input/index.js';
 export * from './input-password/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 './pill/index.js';
 export * from './popover/index.js';
-export * from './separator/index.js';
 export * from './segment/index.js';
 export * from './select/index.js';
+export * from './separator/index.js';
 export * from './skeleton/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';

package/dist/primitives/index.js

@@ -1,29 +1,31 @@
 export * from './app-shell/index.js';
-export * from './button/index.js';
 export * from './badge/index.js';
 export * from './breadcrumb/index.js';
 export * from './button-group/index.js';
+export * from './button/index.js';
+export * from './calendar/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './collapsible/index.js';
 export * from './combobox/index.js';
 export * from './command/index.js';
+export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
-export * from './input/index.js';
 export * from './input-password/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 './pill/index.js';
 export * from './popover/index.js';
-export * from './separator/index.js';
 export * from './segment/index.js';
 export * from './select/index.js';
+export * from './separator/index.js';
 export * from './skeleton/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';

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.2",
+  "version": "2.0.4",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -341,6 +341,16 @@
       "svelte": "./dist/primitives/toast/index.js",
       "default": "./dist/primitives/toast/index.js"
     },
+    "./primitives/date-picker": {
+      "types": "./dist/primitives/date-picker/index.d.ts",
+      "svelte": "./dist/primitives/date-picker/index.js",
+      "default": "./dist/primitives/date-picker/index.js"
+    },
+    "./primitives/calendar": {
+      "types": "./dist/primitives/calendar/index.d.ts",
+      "svelte": "./dist/primitives/calendar/index.js",
+      "default": "./dist/primitives/calendar/index.js"
+    },
     "./composed": {
       "types": "./dist/composed/index.d.ts",
       "svelte": "./dist/composed/index.js",
@@ -440,6 +450,16 @@
       "types": "./dist/composed/toast/index.d.ts",
       "svelte": "./dist/composed/toast/index.js",
       "default": "./dist/composed/toast/index.js"
+    },
+    "./composed/calendar": {
+      "types": "./dist/composed/calendar/index.d.ts",
+      "svelte": "./dist/composed/calendar/index.js",
+      "default": "./dist/composed/calendar/index.js"
+    },
+    "./composed/date-picker": {
+      "types": "./dist/composed/date-picker/index.d.ts",
+      "svelte": "./dist/composed/date-picker/index.js",
+      "default": "./dist/composed/date-picker/index.js"
     }
   },
   "files": [
@@ -492,6 +512,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",