@casinogate/ui 1.11.1 → 1.11.3

package/dist/assets/css/root.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -652,6 +652,9 @@
   .cgui\:basis-1\/2 {
     flex-basis: calc(1 / 2 * 100%);
   }
+  .cgui\:table-fixed {
+    table-layout: fixed;
+  }
   .cgui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
     transform-origin: var(--bits-dropdown-menu-content-transform-origin);
   }

package/dist/components/data-table/components/data-table.expand-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Icon } from '../../icons/index.js';
+
+  let {
+    canExpand,
+    isExpanded,
+    depth = 0,
+    onToggle,
+  }: {
+    canExpand: boolean;
+    isExpanded: boolean;
+    depth?: number;
+    onToggle: () => void;
+  } = $props();
+</script>
+
+{#if canExpand}
+  <button
+    onclick={onToggle}
+    class="cgui:flex cgui:items-center cgui:justify-center cgui:cursor-pointer"
+    style="padding-left: {depth}rem"
+  >
+    {#if isExpanded}
+      <Icon.ChevronDown width={16} height={16} />
+    {:else}
+      <Icon.ChevronRight width={16} height={16} />
+    {/if}
+  </button>
+{:else}
+  <span style="padding-left: {depth}rem; display: inline-block; width: 16px;"></span>
+{/if}

package/dist/components/data-table/components/data-table.expand-button.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    canExpand: boolean;
+    isExpanded: boolean;
+    depth?: number;
+    onToggle: () => void;
+};
+declare const DataTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

package/dist/components/data-table/components/data-table.svelte.d.ts

@@ -85,7 +85,9 @@ export declare class DataTableHeadState {
         readonly "data-slot": "head";
         readonly 'data-id': string;
         readonly style: {
-            readonly width: "calc(undefined * 1px)" | `calc(${number} * 1px)`;
+            readonly width: "undefinedpx" | `${number}px`;
+            readonly 'min-width': string | undefined;
+            readonly 'max-width': string | undefined;
         };
         readonly colspan: number;
     };
@@ -104,7 +106,9 @@ export declare class DataTableCellState {
         readonly id: string;
         readonly "data-slot": "cell";
         readonly style: {
-            readonly width: "calc(undefined * 1px)" | `calc(${number} * 1px)`;
+            readonly width: "undefinedpx" | `${number}px`;
+            readonly 'min-width': string | undefined;
+            readonly 'max-width': string | undefined;
         };
     };
 }

package/dist/components/data-table/components/data-table.svelte.js

@@ -117,8 +117,8 @@ export class DataTableBodyState {
         this.rootState = root;
         this.attachment = attachRef(opts.ref);
         const { stop } = useMutationObserver(() => opts.ref.current, (mutations) => {
-            const target = mutations[mutations.length - 1].target;
-            this.#lastRow = target.lastElementChild;
+            const target = mutations[mutations.length - 1]?.target;
+            this.#lastRow = target?.lastElementChild;
         }, { childList: true, subtree: true });
         let observer = null;
         watch.pre(() => this.#lastRow, () => {
@@ -138,7 +138,7 @@ export class DataTableBodyState {
     #rowObserver = () => {
         const observer = new IntersectionObserver((entries) => {
             const entry = entries[0];
-            if (entry.isIntersecting) {
+            if (entry?.isIntersecting) {
                 this.rootState.opts.table.current?.features?.onLastRowReached?.();
                 if (this.#lastRow) {
                     observer.unobserve(this.#lastRow);
@@ -173,12 +173,22 @@ export class DataTableHeadState {
         this.attachment = attachRef(opts.ref);
     }
     #width = $derived.by(() => this.rootState.columnSizingVars[`--header-${this.opts.header.current.id}-size`]);
+    #minSize = $derived.by(() => {
+        const min = this.opts.header.current.column.columnDef.minSize;
+        return min !== undefined ? `${min}px` : undefined;
+    });
+    #maxSize = $derived.by(() => {
+        const max = this.opts.header.current.column.columnDef.maxSize;
+        return max !== undefined && max !== Number.MAX_SAFE_INTEGER ? `${max}px` : undefined;
+    });
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.head,
         'data-id': this.opts.header.current.id,
         style: {
-            width: `calc(${this.#width} * 1px)`,
+            width: `${this.#width}px`,
+            'min-width': this.#minSize,
+            'max-width': this.#maxSize,
         },
         colspan: this.opts.header.current.colSpan,
         ...this.attachment,
@@ -197,11 +207,21 @@ export class DataTableCellState {
         this.attachment = attachRef(opts.ref);
     }
     #width = $derived.by(() => this.rootState.columnSizingVars[`--col-${this.opts.cell.current?.column.id}-size`]);
+    #minSize = $derived.by(() => {
+        const min = this.opts.cell.current?.column.columnDef.minSize;
+        return min !== undefined ? `${min}px` : undefined;
+    });
+    #maxSize = $derived.by(() => {
+        const max = this.opts.cell.current?.column.columnDef.maxSize;
+        return max !== undefined && max !== Number.MAX_SAFE_INTEGER ? `${max}px` : undefined;
+    });
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.cell,
         style: {
-            width: `calc(${this.#width} * 1px)`,
+            width: `${this.#width}px`,
+            'min-width': this.#minSize,
+            'max-width': this.#maxSize,
         },
         ...this.attachment,
     }));

package/dist/components/data-table/exports-primitive.d.ts

@@ -1,5 +1,6 @@
 export { default as Body } from './components/data-table.body.svelte';
 export { default as Cell } from './components/data-table.cell.svelte';
+export { default as ExpandButton } from './components/data-table.expand-button.svelte';
 export { default as Head } from './components/data-table.head.svelte';
 export { default as Header } from './components/data-table.header.svelte';
 export { default as ResizeHandler } from './components/data-table.resize-handler.svelte';

package/dist/components/data-table/exports-primitive.js

@@ -1,5 +1,6 @@
 export { default as Body } from './components/data-table.body.svelte';
 export { default as Cell } from './components/data-table.cell.svelte';
+export { default as ExpandButton } from './components/data-table.expand-button.svelte';
 export { default as Head } from './components/data-table.head.svelte';
 export { default as Header } from './components/data-table.header.svelte';
 export { default as ResizeHandler } from './components/data-table.resize-handler.svelte';

package/dist/components/data-table/styles.js

@@ -9,7 +9,7 @@ export const dataTableVariants = tv({
             'cgui:border cgui:border-stroke-divider',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         ],
-        table: ['cgui:w-full'],
+        table: ['cgui:w-full', 'cgui:table-fixed'],
         header: ['cgui:font-medium cgui:text-body-2 cgui:text-fg-darkest cgui:sticky cgui:z-1 cgui:top-0'],
         body: [
             'cgui:relative',

package/dist/components/data-table/utils/expanded-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ExpandedState as ExpandedStateValue, Updater } from '@tanstack/table-core';
+type ExpandedStateOpts = {
+    defaultValue?: ExpandedStateValue;
+    onValueChange?: (value: ExpandedStateValue) => void;
+};
+export declare const useExpandedState: (opts?: ExpandedStateOpts) => {
+    value: ExpandedStateValue;
+    updater: (updater: Updater<ExpandedStateValue>) => void;
+};
+export {};

package/dist/components/data-table/utils/expanded-state.svelte.js

@@ -0,0 +1,23 @@
+export const useExpandedState = (opts) => {
+    let value = $state(opts?.defaultValue ?? {});
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
+        },
+        updater: (updater) => {
+            let newExpandedState;
+            if (updater instanceof Function) {
+                newExpandedState = updater(value);
+            }
+            else {
+                newExpandedState = updater;
+            }
+            value = newExpandedState;
+            opts?.onValueChange?.(newExpandedState);
+        },
+    };
+};

package/dist/components/data-table/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { useExpandedState } from './expanded-state.svelte.js';
 export { usePaginationState } from './pagination-state.svelte.js';
 export { useResizeState } from './resize-state.svelte.js';
 export { rowModels } from './row-models.js';

package/dist/components/data-table/utils/index.js

@@ -1,3 +1,4 @@
+export { useExpandedState } from './expanded-state.svelte.js';
 export { usePaginationState } from './pagination-state.svelte.js';
 export { useResizeState } from './resize-state.svelte.js';
 export { rowModels } from './row-models.js';

package/dist/components/textarea/styles.js

@@ -12,7 +12,7 @@ export const textareaVariants = tv({
         variant: {
             primary: [
                 'cgui:border cgui:border-stroke-default',
-                'cgui:bg-surface-lightest cgui:placeholder:text-fg-regular/70 cgui:shadow-none',
+                'cgui:bg-surface-lightest cgui:placeholder:text-fg-regular/70 cgui:text-fg-dark cgui:shadow-none',
                 'cgui:focus:ring-stroke-default cgui:focus-visible:border-stroke-focus',
                 'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
             ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",