@casinogate/ui 1.2.1 → 1.3.1

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

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

package/dist/components/popover/exports.js

@@ -0,0 +1,15 @@
+import { Popover as PopoverPrimitiveBits } from 'bits-ui';
+import { default as Content } from './components/popover.content.svelte';
+import { default as Root } from './components/popover.root.svelte';
+import { default as Trigger } from './components/popover.trigger.svelte';
+import { default as PopoverComponent } from './popover.svelte';
+const Portal = PopoverPrimitiveBits.Portal;
+export const PopoverPrimitive = {
+    Root,
+    Trigger,
+    Portal,
+    Content,
+};
+export const Popover = Object.assign(PopoverComponent, {
+    Trigger,
+});

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

@@ -0,0 +1 @@
+export * from './exports.js';

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export * from './exports.js';

package/dist/components/popover/popover.stories.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import { Popover, PopoverPrimitive } from './index.js';
+  import PopoverBasic from './popover.svelte';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['open', 'disabled', 'side', 'sideOffset', 'align', 'shadow'],
+    },
+
+    layout: 'centered',
+
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 300,
+      },
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Popover',
+    component: PopoverBasic,
+    tags: ['autodocs'],
+
+    parameters,
+
+    argTypes: {
+      align: {
+        control: 'radio',
+        options: ['start', 'center', 'end'],
+        table: {
+          defaultValue: { summary: 'center' },
+        },
+      },
+
+      open: {
+        table: {
+          defaultValue: { summary: 'false' },
+        },
+      },
+
+      disabled: {
+        table: {
+          defaultValue: { summary: 'false' },
+        },
+      },
+      side: {
+        control: 'radio',
+        options: ['top', 'bottom', 'left', 'right'],
+        table: {
+          defaultValue: { summary: 'bottom' },
+        },
+      },
+
+      sideOffset: {
+        control: 'number',
+        table: {
+          defaultValue: { summary: '8' },
+        },
+      },
+
+      shadow: {
+        control: 'boolean',
+        table: {
+          defaultValue: { summary: 'true' },
+        },
+      },
+    },
+  });
+
+  type Args = ComponentProps<typeof Popover>;
+
+  const args: Args = {
+    open: false,
+    disabled: false,
+    side: 'bottom',
+    sideOffset: 8,
+    align: 'center',
+    shadow: true,
+  };
+</script>
+
+<script lang="ts">
+  let customAnchor = $state<HTMLDivElement>();
+</script>
+
+{#snippet template(args: Args)}
+  {@const rootArgs = { open: args.open, disabled: args.disabled }}
+  {@const contentArgs = { side: args.side, sideOffset: args.sideOffset, align: args.align }}
+  <PopoverPrimitive.Root {...rootArgs}>
+    <PopoverPrimitive.Trigger>Trigger</PopoverPrimitive.Trigger>
+
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content {...contentArgs}>Content</PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  </PopoverPrimitive.Root>
+{/snippet}
+
+<Story name="Primitive" {args} {template} {parameters} />
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Popover {...args}>
+      {#snippet trigger()}
+        <Popover.Trigger>Trigger</Popover.Trigger>
+      {/snippet}
+
+      Content
+    </Popover>
+  {/snippet}
+</Story>
+
+<Story name="Custom Anchor" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:items-center cgui:justify-center cgui:h-full cgui:gap-12">
+      <div
+        bind:this={customAnchor}
+        class="cgui:w-40 cgui:h-20 cgui:flex cgui:items-center cgui:justify-center cgui:border cgui:text-center cgui:border-stroke-divider cgui:rounded-sm"
+      >
+        Custom Anchor
+      </div>
+
+      <Popover {...args} {customAnchor}>
+        {#snippet trigger()}
+          <Popover.Trigger>Trigger</Popover.Trigger>
+        {/snippet}
+
+        Content
+      </Popover>
+    </div>
+  {/snippet}
+</Story>

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

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

package/dist/components/popover/popover.svelte

@@ -0,0 +1,72 @@
+<script lang="ts" module>
+  import type { AnimationFn } from './types.js';
+
+  type T = unknown;
+</script>
+
+<script lang="ts" generics="T extends AnimationFn = AnimationFn">
+  import type { AnimationDirection, PopoverProps } from './types.js';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import Content from './components/popover.content.svelte';
+  import Root from './components/popover.root.svelte';
+
+  let {
+    open = $bindable(false),
+    ref = $bindable(null),
+    children,
+    trigger,
+    onOpenChange,
+    onOpenChangeComplete,
+    side = 'bottom',
+    animationFn,
+    animationParams,
+    forceMount = true,
+    ...restProps
+  }: PopoverProps<T> = $props();
+
+  const animationDirection = $derived.by<AnimationDirection>(() => {
+    switch (side) {
+      case 'top':
+        return { y: -10 };
+      case 'bottom':
+        return { y: 10 };
+      case 'left':
+        return { x: -10 };
+      case 'right':
+        return { x: 10 };
+      default:
+        return { y: -10 };
+    }
+  });
+
+  const currentAnimationFn = $derived(animationFn ?? fly);
+
+  const currentAnimationParams = $derived(
+    animationParams ?? { duration: 250, easing: cubicInOut, ...animationDirection }
+  );
+</script>
+
+<Root bind:open {onOpenChange} {onOpenChangeComplete}>
+  {#if trigger}
+    {@render trigger?.()}
+  {/if}
+
+  {#if forceMount}
+    <Content bind:ref forceMount {side} {...restProps}>
+      {#snippet child({ wrapperProps, props, open })}
+        {#if open}
+          <div {...wrapperProps}>
+            <div {...props} transition:currentAnimationFn={currentAnimationParams}>
+              {@render children?.()}
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </Content>
+  {:else}
+    <Content bind:ref {...restProps}>
+      {@render children?.()}
+    </Content>
+  {/if}
+</Root>

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

@@ -0,0 +1,26 @@
+import type { AnimationFn } from './types.js';
+import type { PopoverProps } from './types.js';
+declare function $$render<T extends AnimationFn = AnimationFn>(): {
+    props: PopoverProps<T>;
+    exports: {};
+    bindings: "ref" | "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends AnimationFn = AnimationFn> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends AnimationFn = AnimationFn>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends AnimationFn = AnimationFn>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Popover: $$IsomorphicComponent;
+type Popover<T extends AnimationFn = AnimationFn> = InstanceType<typeof Popover<T>>;
+export default Popover;

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

@@ -0,0 +1,56 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
+    shadow: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    root: never[];
+    trigger: string[];
+    content: never[];
+}, undefined, {
+    shadow: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    root: never[];
+    trigger: string[];
+    content: never[];
+}, import("tailwind-variants").TVReturnType<{
+    shadow: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    root: never[];
+    trigger: string[];
+    content: never[];
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverVariantsProps = VariantProps<typeof popoverVariants>;
+export declare const PopoverStylesContext: Context<ReadableBox<{
+    root: (slotProps?: ({
+        shadow?: boolean | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    trigger: (slotProps?: ({
+        shadow?: boolean | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    content: (slotProps?: ({
+        shadow?: boolean | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+} & {
+    root: (slotProps?: ({
+        shadow?: boolean | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    trigger: (slotProps?: ({
+        shadow?: boolean | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    content: (slotProps?: ({
+        shadow?: boolean | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+} & {}>>;

package/dist/components/popover/styles.js

@@ -0,0 +1,21 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const popoverVariants = tv({
+    slots: {
+        root: [],
+        trigger: [
+            'cgui:cursor-pointer',
+            'cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none cgui:disabled:opacity-50',
+        ],
+        content: [],
+    },
+    variants: {
+        shadow: {
+            true: {
+                content: ['cgui:shadow-popover'],
+            },
+        },
+    },
+});
+export const PopoverStylesContext = new Context(keyWithPrefix('popover-styles'));

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

@@ -0,0 +1,26 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChildrenOrChild } from 'svelte-toolbelt';
+import type { TransitionConfig } from 'svelte/transition';
+import type { PopoverVariantsProps } from './styles.js';
+export type PrimitivePopoverRootProps = PopoverPrimitive.RootProps & {
+    disabled?: boolean;
+} & PopoverVariantsProps;
+export type PrimitivePopoverContentProps = PopoverPrimitive.ContentProps;
+export type PrimitivePopoverPortalProps = PopoverPrimitive.PortalProps;
+export type PrimitivePopoverTriggerProps = PopoverPrimitive.TriggerProps;
+export type AnimationFn = (node: Element, params?: any) => TransitionConfig;
+export type AnimationDirection = {
+    x: number;
+} | {
+    y: number;
+} | {
+    x: number;
+    y: number;
+};
+export type PopoverProps<TAnimationFn extends AnimationFn> = WithoutChildrenOrChild<PrimitivePopoverRootProps> & Pick<PrimitivePopoverContentProps, 'ref' | 'class' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'preventScroll' | 'customAnchor' | 'forceMount'> & {
+    trigger?: Snippet;
+    children?: Snippet;
+    animationFn?: TAnimationFn;
+    animationParams?: Parameters<TAnimationFn>[1];
+};

package/dist/components/popover/types.js

@@ -0,0 +1 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export * from './components/button/index.js';
 export * from './components/checkbox/index.js';
 export * from './components/collapsible/index.js';
 export * from './components/switch/index.js';
-export * from './components/data-table/index.js';
 export * from './components/pagination/index.js';
 export * from './components/segment/index.js';
 export * from './components/icons/index.js';
@@ -13,3 +12,6 @@ export * from './components/skeleton/index.js';
 export * from './components/field/index.js';
 export * from './components/separator/index.js';
 export * from './components/app-shell/index.js';
+export * from './components/navigation/index.js';
+export * from './components/popover/index.js';
+export * from './components/data-table/index.js';

package/dist/index.js

@@ -2,7 +2,6 @@ export * from './components/button/index.js';
 export * from './components/checkbox/index.js';
 export * from './components/collapsible/index.js';
 export * from './components/switch/index.js';
-export * from './components/data-table/index.js';
 export * from './components/pagination/index.js';
 export * from './components/segment/index.js';
 export * from './components/icons/index.js';
@@ -13,3 +12,6 @@ export * from './components/skeleton/index.js';
 export * from './components/field/index.js';
 export * from './components/separator/index.js';
 export * from './components/app-shell/index.js';
+export * from './components/navigation/index.js';
+export * from './components/popover/index.js';
+export * from './components/data-table/index.js';

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

@@ -4,4 +4,4 @@ export declare function noop(): void;
 export declare function noopPromise(): Promise<any>;
 export declare const atom: <T>(factory: () => T) => T;
 export declare const keyWithPrefix: <TKey extends string, TPrefix extends string = "cgui">(key: TKey, prefix?: TPrefix) => `${TPrefix}-${TKey}`;
-export declare const useId: () => string;
+export declare const useId: (uid?: string) => string;

package/dist/internal/utils/common.js

@@ -8,4 +8,4 @@ export function noop() { }
 export async function noopPromise() { }
 export const atom = (factory) => factory();
 export const keyWithPrefix = (key, prefix = 'cgui') => `${prefix}-${key}`;
-export const useId = () => useIdBitsUI('cgui');
+export const useId = (uid) => useIdBitsUI(uid ?? 'cgui');

package/package.json

@@ -1,14 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.2.1",
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "version": "1.3.1",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -20,37 +12,45 @@
     },
     "./styles.css": "./dist/assets/css/root.css"
   },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "peerDependencies": {
     "svelte": "^5.36.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@poppanator/sveltekit-svg": "^6.0.0",
-    "@storybook/addon-a11y": "^9.1.4",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/addon-svelte-csf": "^5.0.8",
-    "@storybook/addon-vitest": "^9.1.4",
-    "@storybook/sveltekit": "^9.1.4",
+    "@storybook/addon-a11y": "^10.0.3",
+    "@storybook/addon-docs": "^10.0.3",
+    "@storybook/addon-svelte-csf": "^5.0.10",
+    "@storybook/addon-vitest": "^10.0.3",
+    "@storybook/sveltekit": "^10.0.3",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.22.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@sveltejs/kit": "^2.48.4",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
-    "@tailwindcss/vite": "^4.0.0",
+    "@tailwindcss/vite": "^4.1.17",
     "clsx": "^2.1.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.2",
-    "storybook": "^9.1.4",
+    "publint": "^0.3.15",
+    "storybook": "^10.0.3",
     "svelte": "^5.36.1",
     "svelte-check": "^4.3.0",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.1.11",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.4"
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2"
   },
   "keywords": [
     "svelte"
@@ -62,8 +62,8 @@
   "dependencies": {
     "@tanstack/table-core": "^8.21.3",
     "bits-ui": "^2.8.11",
-    "runed": "^0.31.1",
-    "svelte-toolbelt": "^0.9.3",
+    "runed": "^0.35.1",
+    "svelte-toolbelt": "^0.10.6",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0"
   },