@casinogate/ui 1.6.2 → 1.7.0

package/dist/components/separator/separator.svelte

@@ -2,17 +2,16 @@
   import { SLOT_ATTR_NAME } from '../../internal/constants/attrs.js';
   import { cn } from '../../internal/utils/common.js';
   import { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { separatorStyles } from './styles.js';
   import type { SeparatorProps } from './types.js';
 
-  let { ref = $bindable(null), class: className, ...restProps }: SeparatorProps = $props();
+  let { ref = $bindable(null), class: className, orientation = 'horizontal', ...restProps }: SeparatorProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
   bind:ref
-  class={cn(
-    'cgui:bg-stroke-divider cgui:shrink-0 cgui:data-[orientation=horizontal]:h-px cgui:data-[orientation=vertical]:h-full cgui:data-[orientation=horizontal]:w-full cgui:data-[orientation=vertical]:w-px',
-    className
-  )}
+  {orientation}
+  class={cn(separatorStyles({ orientation }), className)}
   {...{ [SLOT_ATTR_NAME]: 'separator' }}
   {...restProps}
 />

package/dist/components/separator/separator.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Separator as SeparatorPrimitive } from 'bits-ui';
-declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+import type { SeparatorProps } from './types.js';
+declare const Separator: import("svelte").Component<SeparatorProps, {}, "ref">;
 type Separator = ReturnType<typeof Separator>;
 export default Separator;

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

@@ -0,0 +1,18 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const separatorStyles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, string[], {
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type SeparatorVariantsProps = VariantProps<typeof separatorStyles>;

package/dist/components/separator/styles.js

@@ -0,0 +1,10 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const separatorStyles = tv({
+    base: ['cgui:bg-stroke-divider cgui:shrink-0'],
+    variants: {
+        orientation: {
+            horizontal: ['cgui:h-px cgui:w-full'],
+            vertical: ['cgui:w-px cgui:h-full'],
+        },
+    },
+});

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

@@ -1,2 +1,3 @@
 import { type SeparatorRootProps as SeparatorRootPropsPrimitive } from 'bits-ui';
-export type SeparatorProps = SeparatorRootPropsPrimitive;
+import type { SeparatorVariantsProps } from './styles.js';
+export type SeparatorProps = SeparatorRootPropsPrimitive & Omit<SeparatorVariantsProps, 'orientation'>;

package/dist/components/spinner/spinner.svelte

@@ -6,9 +6,4 @@
   let { class: className, size = 24, ...restProps }: SpinnerProps = $props();
 </script>
 
-<Icon.Spinner
-  class={cn('cgui:animate-spin cgui:text-icon-default', className)}
-  width={size}
-  height={size}
-  {...restProps}
-/>
+<Icon.Spinner class={cn('cgui:animate-spin', className)} width={size} height={size} {...restProps} />

package/dist/internal/utils/tailwindcss.d.ts

@@ -1,3 +1,4 @@
+import { type TV } from 'tailwind-variants';
 declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-declare const tv: import("tailwind-variants").CreateTV;
-export { tv, twMerge };
+export declare const tv: TV;
+export { twMerge };

package/dist/internal/utils/tailwindcss.js

@@ -1,5 +1,5 @@
 import { extendTailwindMerge, } from 'tailwind-merge';
-import { createTV } from 'tailwind-variants';
+import { tv as tvBase } from 'tailwind-variants';
 const tailwindMergeConfig = {
     prefix: 'cgui:',
     extend: {
@@ -35,12 +35,32 @@ const tailwindMergeConfig = {
                 'border-state-info-light',
             ],
             blur: ['blur-xxs', 'blur-xs', 'blur-sm', 'blur-md', 'blur-lg', 'blur-xl', 'blur-2xl'],
+            shadow: [
+                'shadow-base',
+                'shadow-toast',
+                'shadow-switch-thumb',
+                'shadow-segment-item',
+                'shadow-popover',
+                'shadow-select',
+                'shadow-dialog',
+                'shadow-dropdown',
+            ],
         },
     },
 };
+const tvMergeConfig = {
+    classGroups: tailwindMergeConfig.extend?.classGroups,
+};
 const twMerge = extendTailwindMerge(tailwindMergeConfig);
-const tv = createTV({
-    twMerge: true,
-    twMergeConfig: tailwindMergeConfig,
+export const tv = (options, config) => tvBase(options, {
+    ...config,
+    twMerge: config?.twMerge ?? true,
+    twMergeConfig: {
+        ...config?.twMergeConfig,
+        classGroups: {
+            ...tvMergeConfig.classGroups,
+            ...config?.twMergeConfig?.classGroups,
+        },
+    },
 });
-export { tv, twMerge };
+export { twMerge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -66,7 +66,7 @@
     "runed": "^0.35.1",
     "svelte-toolbelt": "^0.10.6",
     "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-variants": "^3.2.2"
   },
   "scripts": {
     "dev": "vite dev",