@tcn/ui 0.12.4 → 0.12.6

package/src/surfaces/modal/modal.tsx

@@ -9,15 +9,24 @@ import styles from './modal.module.css';
 export type ModalProps = FrameProps;
 
 export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
-  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
+  {
+    children,
+    className,
+    isOpen,
+    veil = true,
+    resizable = false,
+    draggable = false,
+    ...props
+  }: ModalProps,
   ref
 ) {
   return (
     <Frame
       ref={ref}
       isOpen={isOpen}
-      draggable={draggable}
       veil={veil}
+      draggable={draggable}
+      resizable={resizable}
       className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
       {...props}
     >

package/src/surfaces/window/window.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Window } from './window.js';
+import { Window, type WindowProps } from './window.js';
 import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { Spacer } from '../../stacks/spacer.js';
@@ -13,9 +13,61 @@ export default {
   title: 'Surfaces/Window',
   component: Window,
   tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'text',
+    },
+    height: {
+      control: 'text',
+    },
+    minWidth: {
+      control: 'text',
+    },
+    minHeight: {
+      control: 'text',
+    },
+    maxWidth: {
+      control: 'text',
+    },
+    maxHeight: {
+      control: 'text',
+    },
+  },
 };
 
-export const WindowStory = () => {
+type WindowStoryProps = Pick<
+  WindowProps,
+  | 'resizable'
+  | 'draggable'
+  | 'veil'
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+>;
+
+export const Baseline = ({
+  resizable,
+  draggable,
+  veil,
+  width = '400px',
+  height = '400px',
+  minWidth = 'min-content',
+  minHeight = '30%',
+  maxWidth = 500,
+  maxHeight = '500px',
+}: WindowStoryProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   function toggle() {
@@ -27,13 +79,17 @@ export const WindowStory = () => {
       <Button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</Button>
       <Window
         isOpen={isOpen}
-        width="400px"
-        height="500px"
-        minWidth="min-content"
-        minHeight="300px"
-        maxWidth="600px"
-        maxHeight="600px"
+        draggable={draggable}
+        veil={veil}
+        resizable={resizable}
+        width={width}
+        height={height}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
       >
+        {/* Place the drag handle around the areas of the window you want to be draggable (usually the header) */}
         <DragHandle>
           <Header>
             <Title>Window Title</Title>

package/src/surfaces/window/window.tsx

@@ -13,27 +13,24 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
     children,
     className,
     isOpen,
-    draggable = true,
-    resizable = true,
     veil = false,
-    width,
-    height,
+    draggable = true,
+    resizable = false,
     ...props
   }: WindowProps,
   ref
 ) {
   return (
     <Frame
+      ref={ref}
       isOpen={isOpen}
-      draggable={draggable}
       veil={veil}
+      draggable={draggable}
+      resizable={resizable}
       className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
-      width={width}
-      height={height}
-      ref={ref}
       {...props}
     >
-      <Scaffold width="100%" height="100%" className={'tcn-window-scaffold'}>
+      <Scaffold className={'tcn-window-scaffold'} width="100%" height="100%">
         {children}
       </Scaffold>
     </Frame>

package/src/themes/stylesheets/reset.css

@@ -91,8 +91,8 @@
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
-  /* FIXME: sometimes reset breaks stacks display value (flex) */
-  /* header, section */
+  header,
+  section,
   article,
   aside,
   details,

package/src/themes/themes/ergo/ergo_theme.css

@@ -794,6 +794,30 @@
     }
   }
 
+  /* DRAWER: */
+  .tcn-drawer {
+    --divide-header: 0;
+    box-shadow: 0px 4px 34px 0px #00000096;
+
+    :where(.tcn-scaffold) {
+      background-color: var(--background-color-primary);
+      overflow: hidden;
+    }
+
+    :where(.tcn-header) {
+      --material: var(--ergo-secondary-dark);
+      --on-material: var(--ergo-white);
+      --action: var(--ergo-tertiary);
+      --on-action: var(--ergo-secondary-dark);
+
+      background-color: var(--material);
+      color: var(--on-material);
+      :where(.tcn-typography) {
+        color: inherit;
+      }
+    }
+  }
+
   /* WINDOW: */
   .tcn-window {
     box-shadow: 0px 4px 34px 0px #00000096;
@@ -1148,6 +1172,7 @@
   }
 
   /* ===== INPUTS ===== */
+  .tcn-entry,
   .tcn-control {
     --act: var(--action);
     --mat: var(--material);
@@ -1165,7 +1190,7 @@
     background: var(--act-raised);
   }
 
-  .tcn-control:focus-visible {
+  .tcn-control:focus-within {
     outline: 2px solid var(--ergo-primary);
     outline-offset: 2px;
   }
@@ -1188,6 +1213,43 @@
     color: var(--on-material-disabled);
   }
 
+  .tcn-control {
+    display: flex;
+    justify-content: center;
+    gap: var(--gap-small);
+  }
+
+  .tcn-control-row {
+    min-height: 22px;
+    height: auto;
+    align-items: center;
+    gap: var(--gap-small);
+    padding-block: 2px;
+  }
+
+  .tcn-control-row > .tcn-icon {
+    color: var(--ergo-grey);
+  }
+
+  .tcn-control .tcn-entry {
+    border: none;
+    background: transparent;
+    padding: 0;
+    min-height: unset;
+    border-radius: 0;
+    height: 100%;
+    flex-grow: 1;
+
+    &:hover,
+    &:active,
+    &:focus-visible,
+    &:focus {
+      outline: none;
+      border: none;
+      background: transparent;
+    }
+  }
+
   .tcn-input {
     height: auto;
   }
@@ -1197,7 +1259,7 @@
     cursor: text;
   }
 
-  .tcn-input-group {
+  .tcn-control-set {
     border-radius: var(--shape-radius-medium);
 
     &:focus-within {
@@ -1205,7 +1267,7 @@
       outline-offset: 2px;
     }
 
-    .tcn-input-group-slot {
+    .tcn-control-set-item {
       z-index: 1;
       border-radius: 0;
       height: auto;
@@ -1218,16 +1280,16 @@
       }
     }
 
-    .tcn-input-group-slot:first-child {
+    .tcn-control-set-item:first-child {
       border-top-left-radius: var(--shape-radius-medium);
       border-bottom-left-radius: var(--shape-radius-medium);
     }
 
-    .tcn-input-group-slot:not(:last-child) {
+    .tcn-control-set-item:not(:last-child) {
       margin-right: -1px;
     }
 
-    .tcn-input-group-slot:last-child {
+    .tcn-control-set-item:last-child {
       border-top-right-radius: var(--shape-radius-medium);
       border-bottom-right-radius: var(--shape-radius-medium);
     }
@@ -1299,11 +1361,13 @@
   .tcn-input,
   .tcn-select,
   .tcn-slider,
+  .tcn-textarea,
   .tcn-checkbox,
   .tcn-switch-wrapper,
   .tcn-date-picker,
   .tcn-date-picker-year-selector,
   .tcn-radio,
+  .tcn-date-picker-input,
   .tcn-suggestion-list-search-input,
   .tcn-suggestion-list {
     --accent-color: var(--ergo-primary);

package/src/utils/dnd/hooks/use_drag_container.ts

@@ -10,14 +10,7 @@ export interface UseDragContainerOptions {
 export function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {
   const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);
   const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });
-  /**
-   *  The value that triggers re-renders. It’s updated in dragCallback so the UI
-   *  moves while dragging, and it’s what the hook returns so the consumer can
-   *  render the element at that position
-   *  (e.g. style={{ left: position.x, top: position.y }}).
-   */
   const [position, setPosition] = useState(positionRef.current);
-
   const [isDragging, setIsDragging] = useState(false);
 
   useDraggable({

package/dist/drawer_bottom.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._drawerBottom_9359033){background-color:var(--background-color-primary)}}

package/dist/drawer_end.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._drawerEnd_39acb27){background-color:var(--background-color-primary)}}

package/dist/drawer_start.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._drawerStart_3abbf56){background-color:var(--background-color-primary)}}

package/dist/drawer_top.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._drawerBottom_7a0635a){background-color:var(--background-color-primary)}}

package/dist/inputs/input_group/input_group.d.ts

@@ -1,5 +0,0 @@
-import { default as React } from 'react';
-import { HStackProps } from '../../stacks/h_stack.js';
-export type InputGroupProps = HStackProps;
-export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=input_group.d.ts.map

package/dist/inputs/input_group/input_group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input_group.d.ts","sourceRoot":"","sources":["../../../src/inputs/input_group/input_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC;AAE1C,eAAO,MAAM,UAAU,qFAmBtB,CAAC"}

package/dist/inputs/input_group/input_group.js

@@ -1,20 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import r from "react";
-import { clsx as t } from "clsx";
-import { HStack as c } from "../../stacks/h_stack.js";
-const N = r.forwardRef(
-  function({ children: n, as: p = "div", className: e, ...m }, s) {
-    const a = r.Children.map(
-      n,
-      (o) => r.isValidElement(o) ? r.cloneElement(o, {
-        ...o.props,
-        className: t(o.props.className, "tcn-input-group-slot")
-      }) : o
-    );
-    return /* @__PURE__ */ u(c, { ref: s, as: p, className: t(e, "tcn-input-group"), ...m, children: a });
-  }
-);
-export {
-  N as InputGroup
-};
-//# sourceMappingURL=input_group.js.map

package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.d.ts

@@ -1,7 +0,0 @@
-import { VStackProps } from '../../../stacks/v_stack.js';
-import { default as React } from 'react';
-export interface DrawerBottomProps extends Omit<VStackProps, 'as' | 'children'> {
-    children?: React.ReactNode;
-}
-export declare const DrawerBottom: React.ForwardRefExoticComponent<DrawerBottomProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=drawer_bottom.d.ts.map

package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_bottom.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,uFAaxB,CAAC"}

package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.js

@@ -1,22 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { VStack as a } from "../../../stacks/v_stack.js";
-import { clsx as s } from "clsx";
-import c from "react";
-import '../../../drawer_bottom.css';const f = "_drawerBottom_9359033", n = { drawerBottom: f }, l = c.forwardRef(
-  function({ children: t, className: o, ...r }, m) {
-    return /* @__PURE__ */ e(
-      a,
-      {
-        ref: m,
-        as: "section",
-        className: s(n.drawerBottom, o, "tcn-drawer-bottom"),
-        ...r,
-        children: t
-      }
-    );
-  }
-);
-export {
-  l as DrawerBottom
-};
-//# sourceMappingURL=drawer_bottom.js.map

package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_bottom.js","sources":["../../../../src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './drawer_bottom.module.css';\n\nexport interface DrawerBottomProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerBottom = React.forwardRef<HTMLElement, DrawerBottomProps>(\n  function DrawerBottom({ children, className, ...props }: DrawerBottomProps, ref) {\n    return (\n      <VStack\n        ref={ref}\n        as=\"section\"\n        className={clsx(styles.drawerBottom, className, 'tcn-drawer-bottom')}\n        {...props}\n      >\n        {children}\n      </VStack>\n    );\n  }\n);\n"],"names":["DrawerBottom","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;4DASaA,IAAeC,EAAM;AAAA,EAChC,SAAsB,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAA4BC,GAAK;AAC/E,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG,EAAKC,EAAO,cAAcN,GAAW,mBAAmB;AAAA,QAClE,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/surfaces/drawers/drawer_end/drawer_end.d.ts

@@ -1,7 +0,0 @@
-import { VStackProps } from '../../../stacks/v_stack.js';
-import { default as React } from 'react';
-export interface DrawerEndProps extends Omit<VStackProps, 'as' | 'children'> {
-    children?: React.ReactNode;
-}
-export declare const DrawerEnd: React.ForwardRefExoticComponent<DrawerEndProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=drawer_end.d.ts.map

package/dist/surfaces/drawers/drawer_end/drawer_end.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_end.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/drawers/drawer_end/drawer_end.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,oFAcpB,CAAC"}

package/dist/surfaces/drawers/drawer_end/drawer_end.js

@@ -1,20 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { VStack as n } from "../../../stacks/v_stack.js";
-import { clsx as d } from "clsx";
-import c from "react";
-import '../../../drawer_end.css';const s = "_drawerEnd_39acb27", m = { drawerEnd: s }, l = c.forwardRef(function({ children: r, className: t, ...o }, a) {
-  return /* @__PURE__ */ e(
-    n,
-    {
-      ref: a,
-      as: "section",
-      className: d(m.drawerEnd, t, "tcn-drawerEnd"),
-      ...o,
-      children: r
-    }
-  );
-});
-export {
-  l as DrawerEnd
-};
-//# sourceMappingURL=drawer_end.js.map

package/dist/surfaces/drawers/drawer_end/drawer_end.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_end.js","sources":["../../../../src/surfaces/drawers/drawer_end/drawer_end.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './drawer_end.module.css';\n\nexport interface DrawerEndProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerEnd = React.forwardRef<HTMLElement, DrawerEndProps>(function DrawerEnd(\n  { children, className, ...props }: DrawerEndProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"section\"\n      className={clsx(styles.drawerEnd, className, 'tcn-drawerEnd')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["DrawerEnd","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;sDASaA,IAAYC,EAAM,WAAwC,SACrE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,WAAWN,GAAW,eAAe;AAAA,MAC3D,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/surfaces/drawers/drawer_start/drawer_start.d.ts

@@ -1,7 +0,0 @@
-import { VStackProps } from '../../../stacks/v_stack.js';
-import { default as React } from 'react';
-export interface DrawerStartProps extends Omit<VStackProps, 'as' | 'children'> {
-    children?: React.ReactNode;
-}
-export declare const DrawerStart: React.ForwardRefExoticComponent<DrawerStartProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=drawer_start.d.ts.map

package/dist/surfaces/drawers/drawer_start/drawer_start.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_start.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/drawers/drawer_start/drawer_start.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,sFAavB,CAAC"}

package/dist/surfaces/drawers/drawer_start/drawer_start.js

@@ -1,22 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { VStack as s } from "../../../stacks/v_stack.js";
-import { clsx as c } from "clsx";
-import f from "react";
-import '../../../drawer_start.css';const m = "_drawerStart_3abbf56", n = { drawerStart: m }, l = f.forwardRef(
-  function({ children: r, className: t, ...a }, o) {
-    return /* @__PURE__ */ e(
-      s,
-      {
-        ref: o,
-        as: "section",
-        className: c(n.drawerStart, t, "tcn-drawerStart"),
-        ...a,
-        children: r
-      }
-    );
-  }
-);
-export {
-  l as DrawerStart
-};
-//# sourceMappingURL=drawer_start.js.map

package/dist/surfaces/drawers/drawer_start/drawer_start.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_start.js","sources":["../../../../src/surfaces/drawers/drawer_start/drawer_start.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './drawer_start.module.css';\n\nexport interface DrawerStartProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerStart = React.forwardRef<HTMLElement, DrawerStartProps>(\n  function DrawerStart({ children, className, ...props }: DrawerStartProps, ref) {\n    return (\n      <VStack\n        ref={ref}\n        as=\"section\"\n        className={clsx(styles.drawerStart, className, 'tcn-drawerStart')}\n        {...props}\n      >\n        {children}\n      </VStack>\n    );\n  }\n);\n"],"names":["DrawerStart","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;0DASaA,IAAcC,EAAM;AAAA,EAC/B,SAAqB,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAA2BC,GAAK;AAC7E,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG,EAAKC,EAAO,aAAaN,GAAW,iBAAiB;AAAA,QAC/D,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/surfaces/drawers/drawer_top/drawer_top.d.ts

@@ -1,7 +0,0 @@
-import { VStackProps } from '../../../stacks/v_stack.js';
-import { default as React } from 'react';
-export interface DrawerTopProps extends Omit<VStackProps, 'as' | 'children'> {
-    children?: React.ReactNode;
-}
-export declare const DrawerTop: React.ForwardRefExoticComponent<DrawerTopProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=drawer_top.d.ts.map

package/dist/surfaces/drawers/drawer_top/drawer_top.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_top.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/drawers/drawer_top/drawer_top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,oFAcpB,CAAC"}

package/dist/surfaces/drawers/drawer_top/drawer_top.js

@@ -1,20 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { VStack as m } from "../../../stacks/v_stack.js";
-import { clsx as s } from "clsx";
-import c from "react";
-import '../../../drawer_top.css';const p = "_drawerBottom_7a0635a", f = { drawerBottom: p }, T = c.forwardRef(function({ children: r, className: o, ...t }, a) {
-  return /* @__PURE__ */ e(
-    m,
-    {
-      ref: a,
-      as: "section",
-      className: s(f.drawerTop, o, "tcn-drawerTop"),
-      ...t,
-      children: r
-    }
-  );
-});
-export {
-  T as DrawerTop
-};
-//# sourceMappingURL=drawer_top.js.map

package/dist/surfaces/drawers/drawer_top/drawer_top.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_top.js","sources":["../../../../src/surfaces/drawers/drawer_top/drawer_top.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './drawer_top.module.css';\n\nexport interface DrawerTopProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerTop = React.forwardRef<HTMLElement, DrawerTopProps>(function DrawerTop(\n  { children, className, ...props }: DrawerTopProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"section\"\n      className={clsx(styles.drawerTop, className, 'tcn-drawerTop')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["DrawerTop","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;4DASaA,IAAYC,EAAM,WAAwC,SACrE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,WAAWN,GAAW,eAAe;AAAA,MAC3D,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/src/surfaces/drawers/__stories__/drawers.stories.tsx

@@ -1,26 +0,0 @@
-import { DrawerStart } from '../drawer_start/drawer_start';
-import { DrawerEnd } from '../drawer_end/drawer_end';
-import { DrawerTop } from '../drawer_top/drawer_top';
-import { DrawerBottom } from '../drawer_bottom/drawer_bottom';
-
-export default {
-  title: 'Surfaces/Drawers',
-  component: DrawerStart,
-  tags: ['autodocs'],
-};
-
-export const DrawerStartStory = () => {
-  return <DrawerStart>drawer start</DrawerStart>;
-};
-
-export const DrawerEndStory = () => {
-  return <DrawerEnd>drawer end</DrawerEnd>;
-};
-
-export const DrawerTopStory = () => {
-  return <DrawerTop>drawer top</DrawerTop>;
-};
-
-export const DrawerBottomStory = () => {
-  return <DrawerBottom>drawer bottom</DrawerBottom>;
-};

package/src/surfaces/drawers/drawer_bottom/drawer_bottom.module.css

@@ -1,5 +0,0 @@
-@layer tcn-system {
-  :where(.drawerBottom) {
-    background-color: var(--background-color-primary);
-  }
-}

package/src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx

@@ -1,23 +0,0 @@
-import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import { clsx } from 'clsx';
-import React from 'react';
-import styles from './drawer_bottom.module.css';
-
-export interface DrawerBottomProps extends Omit<VStackProps, 'as' | 'children'> {
-  children?: React.ReactNode;
-}
-
-export const DrawerBottom = React.forwardRef<HTMLElement, DrawerBottomProps>(
-  function DrawerBottom({ children, className, ...props }: DrawerBottomProps, ref) {
-    return (
-      <VStack
-        ref={ref}
-        as="section"
-        className={clsx(styles.drawerBottom, className, 'tcn-drawer-bottom')}
-        {...props}
-      >
-        {children}
-      </VStack>
-    );
-  }
-);

package/src/surfaces/drawers/drawer_end/drawer_end.module.css

@@ -1,5 +0,0 @@
-@layer tcn-system {
-  :where(.drawerEnd) {
-    background-color: var(--background-color-primary);
-  }
-}

package/src/surfaces/drawers/drawer_end/drawer_end.tsx

@@ -1,24 +0,0 @@
-import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import { clsx } from 'clsx';
-import React from 'react';
-import styles from './drawer_end.module.css';
-
-export interface DrawerEndProps extends Omit<VStackProps, 'as' | 'children'> {
-  children?: React.ReactNode;
-}
-
-export const DrawerEnd = React.forwardRef<HTMLElement, DrawerEndProps>(function DrawerEnd(
-  { children, className, ...props }: DrawerEndProps,
-  ref
-) {
-  return (
-    <VStack
-      ref={ref}
-      as="section"
-      className={clsx(styles.drawerEnd, className, 'tcn-drawerEnd')}
-      {...props}
-    >
-      {children}
-    </VStack>
-  );
-});

package/src/surfaces/drawers/drawer_start/drawer_start.module.css

@@ -1,5 +0,0 @@
-@layer tcn-system {
-  :where(.drawerStart) {
-    background-color: var(--background-color-primary);
-  }
-}

package/src/surfaces/drawers/drawer_start/drawer_start.tsx

@@ -1,23 +0,0 @@
-import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import { clsx } from 'clsx';
-import React from 'react';
-import styles from './drawer_start.module.css';
-
-export interface DrawerStartProps extends Omit<VStackProps, 'as' | 'children'> {
-  children?: React.ReactNode;
-}
-
-export const DrawerStart = React.forwardRef<HTMLElement, DrawerStartProps>(
-  function DrawerStart({ children, className, ...props }: DrawerStartProps, ref) {
-    return (
-      <VStack
-        ref={ref}
-        as="section"
-        className={clsx(styles.drawerStart, className, 'tcn-drawerStart')}
-        {...props}
-      >
-        {children}
-      </VStack>
-    );
-  }
-);