@tcn/ui 0.17.0 → 0.18.0

package/src/utils/{resize → decorators/resizable}/__tests__/handle_config.test.ts

@@ -8,40 +8,20 @@ import {
 
 describe('getHandleConfig', () => {
   describe('edge positions', () => {
-    it('left → horizontal, origin left, invert true, disableDirection true', () => {
-      const config = getHandleConfig('left');
-      expect(config.horizontal).toEqual({
-        origin: 'left',
-        invert: true,
-        disableDirection: true,
-      });
-      expect(config.vertical).toBeUndefined();
-    });
-
-    it('right → horizontal, origin right, invert false, disableDirection true', () => {
-      const config = getHandleConfig('right');
-      expect(config.horizontal).toEqual({
-        origin: 'right',
-        invert: false,
-        disableDirection: true,
-      });
-      expect(config.vertical).toBeUndefined();
-    });
-
-    it('start → horizontal, origin left, invert true, disableDirection false', () => {
+    it('start → horizontal, origin start, invert true, disableDirection false', () => {
       const config = getHandleConfig('start');
       expect(config.horizontal).toEqual({
-        origin: 'left',
+        origin: 'start',
         invert: true,
         disableDirection: false,
       });
       expect(config.vertical).toBeUndefined();
     });
 
-    it('end → horizontal, origin right, invert false, disableDirection false', () => {
+    it('end → horizontal, origin end, invert false, disableDirection false', () => {
       const config = getHandleConfig('end');
       expect(config.horizontal).toEqual({
-        origin: 'right',
+        origin: 'end',
         invert: false,
         disableDirection: false,
       });
@@ -69,65 +49,7 @@ describe('getHandleConfig', () => {
     });
   });
 
-  describe('corner positions (physical)', () => {
-    it('top-left → both axes', () => {
-      const config = getHandleConfig('top-left');
-      expect(config.horizontal).toEqual({
-        origin: 'left',
-        invert: true,
-        disableDirection: true,
-      });
-      expect(config.vertical).toEqual({
-        origin: 'top',
-        invert: true,
-        disableDirection: true,
-      });
-    });
-
-    it('top-right → both axes', () => {
-      const config = getHandleConfig('top-right');
-      expect(config.horizontal).toEqual({
-        origin: 'right',
-        invert: false,
-        disableDirection: true,
-      });
-      expect(config.vertical).toEqual({
-        origin: 'top',
-        invert: true,
-        disableDirection: true,
-      });
-    });
-
-    it('bottom-left → both axes', () => {
-      const config = getHandleConfig('bottom-left');
-      expect(config.horizontal).toEqual({
-        origin: 'left',
-        invert: true,
-        disableDirection: true,
-      });
-      expect(config.vertical).toEqual({
-        origin: 'bottom',
-        invert: false,
-        disableDirection: true,
-      });
-    });
-
-    it('bottom-right → both axes', () => {
-      const config = getHandleConfig('bottom-right');
-      expect(config.horizontal).toEqual({
-        origin: 'right',
-        invert: false,
-        disableDirection: true,
-      });
-      expect(config.vertical).toEqual({
-        origin: 'bottom',
-        invert: false,
-        disableDirection: true,
-      });
-    });
-  });
-
-  describe('corner positions (logical, RTL-aware)', () => {
+  describe('corner positions', () => {
     it('top-start → horizontal disableDirection false', () => {
       const config = getHandleConfig('top-start');
       expect(config.horizontal?.disableDirection).toBe(false);
@@ -230,38 +152,38 @@ describe('computeResizeState', () => {
 });
 
 describe('resolveHandleConfig', () => {
-  it('resolves edge position with direction in LTR', () => {
-    const config = resolveHandleConfig('right', 'ltr');
-    expect(config.horizontal).toEqual({ origin: 'right', direction: 1 });
+  it('resolves end edge with direction in LTR', () => {
+    const config = resolveHandleConfig('end', 'ltr');
+    expect(config.horizontal).toEqual({ origin: 'end', direction: 1 });
     expect(config.vertical).toBeUndefined();
   });
 
-  it('resolves edge position with direction in LTR (inverted)', () => {
-    const config = resolveHandleConfig('left', 'ltr');
-    expect(config.horizontal).toEqual({ origin: 'left', direction: -1 });
+  it('resolves start edge with direction in LTR (inverted)', () => {
+    const config = resolveHandleConfig('start', 'ltr');
+    expect(config.horizontal).toEqual({ origin: 'start', direction: -1 });
   });
 
-  it('resolves logical position — start flips in RTL', () => {
+  it('start flips direction in RTL', () => {
     const ltr = resolveHandleConfig('start', 'ltr');
     const rtl = resolveHandleConfig('start', 'rtl');
     expect(ltr.horizontal?.direction).toBe(-1);
     expect(rtl.horizontal?.direction).toBe(1);
   });
 
-  it('resolves physical position — left ignores RTL', () => {
-    const ltr = resolveHandleConfig('left', 'ltr');
-    const rtl = resolveHandleConfig('left', 'rtl');
-    expect(ltr.horizontal?.direction).toBe(-1);
+  it('end flips direction in RTL', () => {
+    const ltr = resolveHandleConfig('end', 'ltr');
+    const rtl = resolveHandleConfig('end', 'rtl');
+    expect(ltr.horizontal?.direction).toBe(1);
     expect(rtl.horizontal?.direction).toBe(-1);
   });
 
   it('resolves corner with both axes', () => {
-    const config = resolveHandleConfig('bottom-right', 'ltr');
-    expect(config.horizontal).toEqual({ origin: 'right', direction: 1 });
+    const config = resolveHandleConfig('bottom-end', 'ltr');
+    expect(config.horizontal).toEqual({ origin: 'end', direction: 1 });
     expect(config.vertical).toEqual({ origin: 'bottom', direction: 1 });
   });
 
-  it('resolves logical corner — horizontal flips in RTL, vertical does not', () => {
+  it('corner horizontal flips in RTL, vertical does not', () => {
     const config = resolveHandleConfig('bottom-start', 'rtl');
     expect(config.horizontal?.direction).toBe(1);
     expect(config.vertical?.direction).toBe(1);

package/src/utils/{resize → decorators/resizable}/__tests__/resize_strategy.test.ts

@@ -18,22 +18,22 @@ function start(
 }
 
 describe('ResizeHandleStrategy', () => {
-  describe('horizontal edge (right)', () => {
+  describe('horizontal edge (end)', () => {
     it('computes positive resize when dragging right', () => {
-      const strategy = new ResizeHandleStrategy('right');
+      const strategy = new ResizeHandleStrategy('end');
       start(strategy);
 
       const result = strategy.resize({ x: 150, y: 100 });
       expect(result.horizontal).toBeDefined();
       expect(result.horizontal?.newSize).toBe(350);
-      expect(result.horizontal?.origin).toBe('right');
+      expect(result.horizontal?.origin).toBe('end');
       expect(result.horizontal?.totalDelta).toBe(50);
       expect(result.horizontal?.currentDelta).toBe(50);
       expect(result.vertical).toBeUndefined();
     });
 
     it('computes negative resize when dragging left', () => {
-      const strategy = new ResizeHandleStrategy('right');
+      const strategy = new ResizeHandleStrategy('end');
       start(strategy);
 
       const result = strategy.resize({ x: 50, y: 100 });
@@ -42,18 +42,18 @@ describe('ResizeHandleStrategy', () => {
     });
   });
 
-  describe('horizontal edge (left, inverted)', () => {
+  describe('horizontal edge (start, inverted)', () => {
     it('shrinks when dragging right', () => {
-      const strategy = new ResizeHandleStrategy('left');
+      const strategy = new ResizeHandleStrategy('start');
       start(strategy);
 
       const result = strategy.resize({ x: 150, y: 100 });
       expect(result.horizontal?.newSize).toBe(250);
-      expect(result.horizontal?.origin).toBe('left');
+      expect(result.horizontal?.origin).toBe('start');
     });
 
     it('grows when dragging left', () => {
-      const strategy = new ResizeHandleStrategy('left');
+      const strategy = new ResizeHandleStrategy('start');
       start(strategy);
 
       const result = strategy.resize({ x: 50, y: 100 });
@@ -74,20 +74,20 @@ describe('ResizeHandleStrategy', () => {
     });
   });
 
-  describe('corner (bottom-right)', () => {
+  describe('corner (bottom-end)', () => {
     it('computes both axes simultaneously', () => {
-      const strategy = new ResizeHandleStrategy('bottom-right');
+      const strategy = new ResizeHandleStrategy('bottom-end');
       start(strategy);
 
       const result = strategy.resize({ x: 160, y: 140 });
       expect(result.horizontal?.newSize).toBe(360);
-      expect(result.horizontal?.origin).toBe('right');
+      expect(result.horizontal?.origin).toBe('end');
       expect(result.vertical?.newSize).toBe(240);
       expect(result.vertical?.origin).toBe('bottom');
     });
   });
 
-  describe('RTL — logical positions', () => {
+  describe('RTL', () => {
     it('start handle flips direction in RTL', () => {
       const strategy = new ResizeHandleStrategy('start');
       start(strategy, { languageDirection: 'rtl' });
@@ -104,8 +104,8 @@ describe('ResizeHandleStrategy', () => {
       expect(result.horizontal?.newSize).toBe(250);
     });
 
-    it('left handle ignores RTL (physical)', () => {
-      const strategy = new ResizeHandleStrategy('left');
+    it('end handle flips direction in RTL', () => {
+      const strategy = new ResizeHandleStrategy('end');
       start(strategy, { languageDirection: 'rtl' });
 
       const result = strategy.resize({ x: 150, y: 100 });
@@ -115,7 +115,7 @@ describe('ResizeHandleStrategy', () => {
 
   describe('commitResize — tracks applied dimensions', () => {
     it('currentDelta tracks committed size', () => {
-      const strategy = new ResizeHandleStrategy('right');
+      const strategy = new ResizeHandleStrategy('end');
       start(strategy);
 
       strategy.resize({ x: 150, y: 100 });
@@ -127,7 +127,7 @@ describe('ResizeHandleStrategy', () => {
     });
 
     it('currentDelta is correct when previous resize was clamped', () => {
-      const strategy = new ResizeHandleStrategy('right');
+      const strategy = new ResizeHandleStrategy('end');
       start(strategy);
 
       strategy.resize({ x: 150, y: 100 });
@@ -141,23 +141,23 @@ describe('ResizeHandleStrategy', () => {
 
   describe('endResize', () => {
     it('returns committed sizes and origins', () => {
-      const strategy = new ResizeHandleStrategy('bottom-right');
+      const strategy = new ResizeHandleStrategy('bottom-end');
       start(strategy);
 
       strategy.resize({ x: 180, y: 160 });
       strategy.commitResize({ width: 380, height: 260 });
 
       const result = strategy.endResize();
-      expect(result.horizontal).toEqual({ width: 380, origin: 'right' });
+      expect(result.horizontal).toEqual({ width: 380, origin: 'end' });
       expect(result.vertical).toEqual({ height: 260, origin: 'bottom' });
     });
 
     it('returns start sizes if no resize occurred', () => {
-      const strategy = new ResizeHandleStrategy('right');
+      const strategy = new ResizeHandleStrategy('end');
       start(strategy);
 
       const result = strategy.endResize();
-      expect(result.horizontal).toEqual({ width: 300, origin: 'right' });
+      expect(result.horizontal).toEqual({ width: 300, origin: 'end' });
     });
   });
 });

package/src/utils/{resize → decorators/resizable}/context.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { makeContextHook } from '../hooks/make_context_hook.js';
+import { makeContextHook } from '../../hooks/make_context_hook.js';
 import type { ResizableContextValue } from './types.js';
 
 export const ResizableContext = createContext<ResizableContextValue | undefined>(

package/src/utils/{resize → decorators/resizable}/handle_config.ts

@@ -15,17 +15,11 @@ import type {
 
 const configs: Record<ResizeHandlePosition, HandleConfig> = {
   // Edges — single axis
-  left: {
-    horizontal: { origin: 'left', invert: true, disableDirection: true },
-  },
-  right: {
-    horizontal: { origin: 'right', invert: false, disableDirection: true },
-  },
   start: {
-    horizontal: { origin: 'left', invert: true, disableDirection: false },
+    horizontal: { origin: 'start', invert: true, disableDirection: false },
   },
   end: {
-    horizontal: { origin: 'right', invert: false, disableDirection: false },
+    horizontal: { origin: 'end', invert: false, disableDirection: false },
   },
   top: {
     vertical: { origin: 'top', invert: true, disableDirection: true },
@@ -34,39 +28,21 @@ const configs: Record<ResizeHandlePosition, HandleConfig> = {
     vertical: { origin: 'bottom', invert: false, disableDirection: true },
   },
 
-  // Corners — dual axis (physical)
-  'top-left': {
-    horizontal: { origin: 'left', invert: true, disableDirection: true },
-    vertical: { origin: 'top', invert: true, disableDirection: true },
-  },
-  'top-right': {
-    horizontal: { origin: 'right', invert: false, disableDirection: true },
-    vertical: { origin: 'top', invert: true, disableDirection: true },
-  },
-  'bottom-left': {
-    horizontal: { origin: 'left', invert: true, disableDirection: true },
-    vertical: { origin: 'bottom', invert: false, disableDirection: true },
-  },
-  'bottom-right': {
-    horizontal: { origin: 'right', invert: false, disableDirection: true },
-    vertical: { origin: 'bottom', invert: false, disableDirection: true },
-  },
-
-  // Corners — dual axis (logical, RTL-aware)
+  // Corners — dual axis
   'top-start': {
-    horizontal: { origin: 'left', invert: true, disableDirection: false },
+    horizontal: { origin: 'start', invert: true, disableDirection: false },
     vertical: { origin: 'top', invert: true, disableDirection: true },
   },
   'top-end': {
-    horizontal: { origin: 'right', invert: false, disableDirection: false },
+    horizontal: { origin: 'end', invert: false, disableDirection: false },
     vertical: { origin: 'top', invert: true, disableDirection: true },
   },
   'bottom-start': {
-    horizontal: { origin: 'left', invert: true, disableDirection: false },
+    horizontal: { origin: 'start', invert: true, disableDirection: false },
     vertical: { origin: 'bottom', invert: false, disableDirection: true },
   },
   'bottom-end': {
-    horizontal: { origin: 'right', invert: false, disableDirection: false },
+    horizontal: { origin: 'end', invert: false, disableDirection: false },
     vertical: { origin: 'bottom', invert: false, disableDirection: true },
   },
 };

package/src/utils/{resize → decorators/resizable}/resizable.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef } from 'react';
 import { clsx } from 'clsx';
-import { useForkRef } from '../hooks/use_fork_ref.js';
+import { useForkRef } from '../../hooks/use_fork_ref.js';
 import { ResizableContext } from './context.js';
 import type {
   OnWidthResize,

package/src/utils/{resize → decorators/resizable}/resize_handle.module.css

@@ -5,9 +5,7 @@
     pointer-events: auto;
   }
 
-  /* Horizontal edges: left, right, start, end */
-  :where(.resize-handle[data-position="left"]),
-  :where(.resize-handle[data-position="right"]),
+  /* Horizontal edges: start, end */
   :where(.resize-handle[data-position="start"]),
   :where(.resize-handle[data-position="end"]) {
     top: 0;
@@ -16,14 +14,6 @@
     cursor: ew-resize;
   }
 
-  :where(.resize-handle[data-position="left"]) {
-    left: var(--resize-offset, 0px);
-  }
-
-  :where(.resize-handle[data-position="right"]) {
-    right: var(--resize-offset, 0px);
-  }
-
   :where(.resize-handle[data-position="start"]:dir(ltr)) {
     left: var(--resize-offset, 0px);
   }
@@ -58,10 +48,6 @@
   }
 
   /* Corners: small square at intersection */
-  :where(.resize-handle[data-position="top-left"]),
-  :where(.resize-handle[data-position="top-right"]),
-  :where(.resize-handle[data-position="bottom-left"]),
-  :where(.resize-handle[data-position="bottom-right"]),
   :where(.resize-handle[data-position="top-start"]),
   :where(.resize-handle[data-position="top-end"]),
   :where(.resize-handle[data-position="bottom-start"]),
@@ -70,32 +56,6 @@
     height: 16px;
   }
 
-  /* Physical corners */
-  :where(.resize-handle[data-position="top-left"]) {
-    top: var(--resize-offset, 0px);
-    left: var(--resize-offset, 0px);
-    cursor: nwse-resize;
-  }
-
-  :where(.resize-handle[data-position="top-right"]) {
-    top: var(--resize-offset, 0px);
-    right: var(--resize-offset, 0px);
-    cursor: nesw-resize;
-  }
-
-  :where(.resize-handle[data-position="bottom-left"]) {
-    bottom: var(--resize-offset, 0px);
-    left: var(--resize-offset, 0px);
-    cursor: nesw-resize;
-  }
-
-  :where(.resize-handle[data-position="bottom-right"]) {
-    bottom: var(--resize-offset, 0px);
-    right: var(--resize-offset, 0px);
-    cursor: nwse-resize;
-  }
-
-  /* Logical corners (RTL-aware) */
   :where(.resize-handle[data-position="top-start"]:dir(ltr)) {
     top: var(--resize-offset, 0px);
     left: var(--resize-offset, 0px);

package/src/utils/{resize → decorators/resizable}/resize_handle.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { useResizable } from './context.js';
 import { getHandleConfig } from './handle_config.js';
 import { ResizeHandleStrategy } from './resize_strategy.js';
-import { detectResizeBounds } from '../../stacks/box/detect_resize_bounds.js';
+import { detectResizeBounds } from '../../../stacks/box/detect_resize_bounds.js';
 import type { ResizeHandlePosition } from './types.js';
 import styles from './resize_handle.module.css';
 

package/src/utils/{resize → decorators/resizable}/resize_strategy.ts

@@ -9,7 +9,7 @@ import type {
   WidthResizeOrigin,
   HeightResizeOrigin,
 } from './types.js';
-import type { Dimensions, Position, Rectangle } from '../types/dimensions.js';
+import type { Dimensions, Position, Rectangle } from '../../types/dimensions.js';
 
 export interface StartResizeParams {
   rectangle: Rectangle;

package/src/utils/{resize → decorators/resizable}/types.ts

@@ -5,7 +5,7 @@ import type {
   OnHeightResizeEnd,
   WidthResizeOrigin,
   HeightResizeOrigin,
-} from '../../stacks/box/types.js';
+} from '../../../stacks/box/types.js';
 
 export type {
   OnWidthResize,
@@ -20,15 +20,9 @@ export type ResizeHandlePosition =
   // Edges (single axis)
   | 'top'
   | 'bottom'
-  | 'left'
-  | 'right'
   | 'start'
   | 'end'
   // Corners (dual axis)
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
   | 'top-start'
   | 'top-end'
   | 'bottom-start'

package/src/utils/hooks/labelled_by_context.ts

@@ -0,0 +1,27 @@
+import { createContext, useContext, useId } from 'react';
+
+export interface LabelledByContextValue {
+  labelId: string;
+}
+
+/**
+ * Context for wiring aria-labelledby between a parent container and a child
+ * label element.
+ */
+export const LabelledByContext = createContext<LabelledByContextValue | null>(null);
+
+export const useLabelledBy = () => useContext(LabelledByContext);
+
+/**
+ * Derives a stable label ID for aria-labelledby wiring.
+ *
+ * - If `ariaLabelledBy` is provided, it takes precedence (full override).
+ * - If `id` is provided, the label ID is deterministic (`${id}-legend`).
+ * - Otherwise, falls back to React's `useId()`.
+ */
+export function useLabelledById(id?: string, ariaLabelledBy?: string) {
+  const reactId = useId();
+  const baseId = id ?? reactId;
+  const labelId = ariaLabelledBy || `${baseId}-legend`;
+  return { baseId, labelId };
+}

package/src/utils/index.ts

@@ -1,12 +1,11 @@
-export * from './click_away_listener.js';
-export * from './focus_redirect.js';
-export * from './scroll_away_listener.js';
+export * from './listeners/index.js';
 
-export * from './dnd/hooks/use_draggable.js';
+export * from './decorators/draggable/use_draggable.js';
 export * from './hooks/make_context_hook.js';
 export * from './hooks/use_fork_ref.js';
 export * from './hooks/use_resize_observer.js';
 export * from './hooks/use_media_query.js';
+export * from './hooks/labelled_by_context.js';
 
 export * from './default_value.js';
 
@@ -17,9 +16,10 @@ export * from './calendar/get_months_of_year.js';
 export * from './calendar/month.js';
 
 export * from './types/dimensions.js';
-export * from './types/variations.js';
+export * from './types/sides.js';
+export * from './system/index.js';
 
-export * from './dnd/draggable/draggable.js';
-export * from './dnd/handle.js';
+export * from './decorators/draggable/draggable.js';
+export * from './decorators/draggable/drag_handle.js';
 
-export * from './resize/index.js';
+export * from './decorators/resizable/index.js';

package/src/utils/{click_away_listener.tsx → listeners/click_away_listener.tsx}

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react';
-import { useForkRef } from './hooks/use_fork_ref.js';
+import { useForkRef } from '../hooks/use_fork_ref.js';
 export interface ClickAwayListenerProps {
   children: React.ReactElement;
   onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;

package/src/utils/listeners/index.ts

@@ -0,0 +1,3 @@
+export * from './click_away_listener.js';
+export * from './focus_redirect.js';
+export * from './scroll_away_listener.js';

package/src/utils/{scroll_away_listener.tsx → listeners/scroll_away_listener.tsx}

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { useForkRef } from './hooks/use_fork_ref.js';
+import { useForkRef } from '../hooks/use_fork_ref.js';
 export interface ScrollAwayListenerProps {
   children: React.ReactElement;
   isException?: (target: HTMLElement) => boolean;

package/src/utils/system/index.ts

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

package/src/utils/types/sides.ts

@@ -0,0 +1,2 @@
+export type HorizontalSide = 'start' | 'end';
+export type VerticalSide = 'top' | 'bottom';

package/dist/actions/button/slim_button/slim_button.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { ButtonProps } from '../button/button.js';
-/**
- * @deprecated - use Button instead (utility=true)
- * @param props - ButtonProps
- * @returns SlimButton
- */
-export declare const SlimButton: React.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "utility">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=slim_button.d.ts.map

package/dist/actions/button/slim_button/slim_button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slim_button.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAK1D;;;;GAIG;AACH,eAAO,MAAM,UAAU,qHAcrB,CAAC"}

package/dist/actions/button/slim_button/slim_button.js

@@ -1,18 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import i from "react";
-import { Button as n } from "../button/button.js";
-import { clsx as l } from "clsx";
-import '../../../slim_button.css';const u = "_slim-button_188fdc3", c = { "slim-button": u }, b = i.forwardRef(({ children: t, className: o, ...m }, r) => /* @__PURE__ */ s(
-  n,
-  {
-    ref: r,
-    className: l(c["slim-button"], "tcn-slim-button", o),
-    utility: !0,
-    ...m,
-    children: t
-  }
-));
-export {
-  b as SlimButton
-};
-//# sourceMappingURL=slim_button.js.map

package/dist/actions/button/slim_button/slim_button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slim_button.js","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, ButtonProps } from '../button/button.js';\nimport { clsx } from 'clsx';\n// Styles\nimport styles from './slim_button.module.css';\n\n/**\n * @deprecated - use Button instead (utility=true)\n * @param props - ButtonProps\n * @returns SlimButton\n */\nexport const SlimButton = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, 'utility'>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Button\n      ref={ref}\n      className={clsx(styles['slim-button'], 'tcn-slim-button', className)}\n      utility={true}\n      {...props}\n    >\n      {children}\n    </Button>\n  );\n});\n"],"names":["SlimButton","React","children","className","props","ref","jsx","Button","clsx","styles"],"mappings":";;;;4DAWaA,IAAaC,EAAM,WAG9B,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAElC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAKC,EAAO,aAAa,GAAG,mBAAmBN,CAAS;AAAA,IACnE,SAAS;AAAA,IACR,GAAGC;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,CAGN;"}

package/dist/draggable.module-BgelQsuJ.js

@@ -1,5 +0,0 @@
-import './draggable.css';const s = "_draggable_db40376", a = { draggable: s };
-export {
-  a as s
-};
-//# sourceMappingURL=draggable.module-BgelQsuJ.js.map

package/dist/draggable.module-BgelQsuJ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"draggable.module-BgelQsuJ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/frame.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._frame-dialog_2a77c1d){overflow:hidden}}

package/dist/left_resize_handle.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._left-resize-handle_215501a){position:fixed;bottom:0;left:var(--resize-offset, -8px);height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}}

package/dist/resizable.module-I6iyBAvM.js

@@ -1,5 +0,0 @@
-import './resizable.css';const e = "_resizable-target_a6e624b", s = { "resizable-target": e };
-export {
-  s
-};
-//# sourceMappingURL=resizable.module-I6iyBAvM.js.map

package/dist/resizable.module-I6iyBAvM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"resizable.module-I6iyBAvM.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/right_resize_handle.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._right-resize-handle_7f232b9){position:fixed;bottom:0;right:var(--resize-offset, -8px);height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}}

package/dist/slim_button.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._slim-button_188fdc3){min-height:auto}:where(._slim-button_188fdc3[data-is-disabled=true]){pointer-events:none}}