@tcn/ui 0.12.5 → 0.12.7

package/src/surfaces/aside/aside.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Footer, HBody, Header, Rail, VBody } from '../../layouts/index.js';
+import { Box } from '../../stacks/index.js';
+import { Aside } from './aside.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { Panel } from '../panel/panel.js';
+import { theme } from '../../themes/theme_variables.js';
+
+const meta: Meta<typeof Aside> = {
+  title: 'Surfaces/Aside',
+  component: Aside,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Aside>;
+
+export const Baseline: Story = {
+  render: () => (
+    <Box
+      height="100vh"
+      minHeight="400px"
+      padding="16px"
+      style={{ backgroundColor: theme.backgroundColors.tertiary }}
+    >
+      <Panel>
+        <Header>
+          <Title>Parent Container Title</Title>
+        </Header>
+        <HBody>
+          <Rail>
+            <Aside width="240px">
+              <Header>
+                <Title>Aside - Secondary</Title>
+              </Header>
+              <VBody>
+                <BodyText>Aside Body</BodyText>
+              </VBody>
+              <Footer>
+                <BodyText>Aside Footer</BodyText>
+              </Footer>
+            </Aside>
+            <VBody>
+              <BodyText>Primary Content</BodyText>
+            </VBody>
+          </Rail>
+        </HBody>
+
+        <Footer>
+          <Title>Parent Container Footer</Title>
+        </Footer>
+      </Panel>
+    </Box>
+  ),
+};

package/src/surfaces/aside/aside.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import clsx from 'clsx';
+
+import styles from './aside.module.css';
+
+export type AsideProps = ScaffoldProps;
+
+export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
+  { children, className, ...props }: AsideProps,
+  ref
+) {
+  return (
+    <Scaffold
+      ref={ref}
+      className={clsx(styles['aside'], 'tcn-surface', 'tcn-aside', className)}
+      {...props}
+    >
+      {children}
+    </Scaffold>
+  );
+});

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

@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import { Button } from '../../actions/index.js';
+import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { Drawer, type DrawerProps } from './drawer.js';
+import { Spacer } from '../../stacks/index.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { BugIcon } from '@tcn/icons/bug_icon.js';
+
+export default {
+  title: 'Surfaces/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {
+    side: {
+      control: 'select',
+      options: ['start', 'end', 'top', 'bottom'],
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'text',
+      description: 'Arg to swap between setting width and height',
+    },
+    minSize: {
+      control: 'text',
+      description: 'Arg to set the minimum size of the drawer',
+    },
+    maxSize: {
+      control: 'text',
+      description: 'Arg to set the maximum size of the drawer',
+    },
+  },
+  args: {
+    resizable: true,
+    veil: false,
+    side: 'start',
+    size: '400px',
+    minSize: '240px',
+    maxSize: '90%',
+  },
+};
+
+type DrawerStoryProps = Pick<DrawerProps, 'resizable' | 'veil' | 'side'> & {
+  size?: string;
+  minSize?: string;
+  maxSize?: string;
+};
+
+export const Baseline = ({
+  veil,
+  resizable,
+  side,
+  size,
+  minSize,
+  maxSize,
+}: DrawerStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggle() {
+    setIsOpen(!isOpen);
+  }
+
+  const useWidth = side === 'start' || side === 'end';
+
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <Button hierarchy="secondary" onClick={toggle}>
+        {isOpen ? 'Close' : 'Open'}
+      </Button>
+
+      <Drawer
+        side={side}
+        isOpen={isOpen}
+        veil={veil}
+        resizable={resizable}
+        width={useWidth ? size : undefined}
+        minWidth={useWidth ? minSize : undefined}
+        maxWidth={useWidth ? maxSize : undefined}
+        height={useWidth ? undefined : size}
+        minHeight={useWidth ? undefined : minSize}
+        maxHeight={useWidth ? undefined : maxSize}
+      >
+        {/* Add a drag handle around the areas of the modal you want to be draggable (usually the header) */}
+        {/* <DragHandle> */}
+        <Header>
+          <Title>Drawer Title</Title>
+          <Spacer />
+          <Button utility hierarchy="tertiary" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+          <Button utility hierarchy="secondary" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+          <Button utility hierarchy="primary" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+        </Header>
+        {/* </DragHandle> */}
+
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <Button utility hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button utility hierarchy="secondary">
+            <BugIcon />
+          </Button>
+          <Button utility hierarchy="primary">
+            <BugIcon />
+          </Button>
+        </UtilityBar>
+        <VBody>
+          <BodyText>This is a drawer</BodyText>
+        </VBody>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Drawer>
+    </ZStack>
+  );
+};

package/src/surfaces/drawers/drawer.tsx

@@ -0,0 +1,26 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Scaffold } from '../../layouts/scaffold/scaffold.js';
+import { Slide, type SlideProps } from '../../overlay/slide/slide.js';
+
+export type DrawerProps = SlideProps;
+
+export const Drawer = React.forwardRef<HTMLElement, DrawerProps>(function Drawer(
+  { children, className, isOpen, veil = false, resizable = false, ...props }: DrawerProps,
+  ref
+) {
+  return (
+    <Slide
+      ref={ref}
+      isOpen={isOpen}
+      veil={veil}
+      resizable={resizable}
+      className={clsx('tcn-surface', 'tcn-drawer', className)}
+      {...props}
+    >
+      <Scaffold className={'tcn-drawer-scaffold'} width="100%" height="100%">
+        {children}
+      </Scaffold>
+    </Slide>
+  );
+});

package/src/surfaces/index.ts

@@ -4,11 +4,9 @@ export * from './confirm/confirm.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
 export * from './panel/panel.js';
+export * from './aside/aside.js';
 export * from './popover/popover.js';
-export * from './drawers/drawer_bottom/drawer_bottom.js';
-export * from './drawers/drawer_top/drawer_top.js';
-export * from './drawers/drawer_start/drawer_start.js';
-export * from './drawers/drawer_end/drawer_end.js';
+export { Drawer, type DrawerProps } from './drawers/drawer.js';
 export { Window, type WindowProps } from './window/window.js';
 export { Modal, type ModalProps } from './modal/modal.js';
 export { Tooltip, type TooltipProps } from './tooltip/tooltip.js';

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

@@ -110,8 +110,8 @@
     --quaternary-color-strong: #008cff;
 
     --background-color-primary: #ffffff;
-    --background-color-secondary: #ffffff;
-    --background-color-tertiary: #ffffff;
+    --background-color-secondary: #fafafa;
+    --background-color-tertiary: #f1f1f1;
     --background-color-quaternary: #ffffff;
 
     --foreground-color-primary: #aaa;
@@ -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;
@@ -885,6 +909,29 @@
     background-color: var(--material);
     border-radius: var(--shape-radius-medium);
     overflow: hidden;
+
+    :where(.tcn-title) {
+      font-size: 18px;
+    }
+  }
+
+  /* Aside */
+  .tcn-aside {
+    --material: var(--background-color-secondary);
+    background-color: var(--material);
+    overflow: hidden;
+
+    :where(.tcn-header) {
+      min-height: var(--bar-md);
+    }
+
+    :where(.tcn-footer) {
+      min-height: var(--bar-md);
+    }
+
+    :where(.tcn-title) {
+      font-size: 16px;
+    }
   }
 
   /* Card */
@@ -1148,6 +1195,7 @@
   }
 
   /* ===== INPUTS ===== */
+  .tcn-entry,
   .tcn-control {
     --act: var(--action);
     --mat: var(--material);
@@ -1165,7 +1213,7 @@
     background: var(--act-raised);
   }
 
-  .tcn-control:focus-visible {
+  .tcn-control:focus-within {
     outline: 2px solid var(--ergo-primary);
     outline-offset: 2px;
   }
@@ -1188,6 +1236,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 +1282,7 @@
     cursor: text;
   }
 
-  .tcn-input-group {
+  .tcn-control-set {
     border-radius: var(--shape-radius-medium);
 
     &:focus-within {
@@ -1205,7 +1290,7 @@
       outline-offset: 2px;
     }
 
-    .tcn-input-group-slot {
+    .tcn-control-set-item {
       z-index: 1;
       border-radius: 0;
       height: auto;
@@ -1218,16 +1303,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 +1384,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/tsconfig.json

@@ -1,36 +1,8 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "~aip-160/*": [
-        "../aip-160/src/*"
-      ],
-      "~aip-160-editor/*": [
-        "../aip-160-editor/src/*"
-      ],
-      "~icons/*": [
-        "../icons/src/*"
-      ],
-      "~resource-store/*": [
-        "../resource-store/src/*"
-      ],
-      "~sb-blackcat-addon/*": [
-        "../sb-blackcat-addon/src/*"
-      ],
-      "~state/*": [
-        "../state/src/*"
-      ],
-      "~ui/*": [
-        "./src/*"
-      ],
-      "~ui-table/*": [
-        "../ui-table/src/*"
-      ]
-    }
+    "rootDir": ".",
+    "noImplicitAny": false
   },
-  "include": [
-    "src/**/*",
-    "types/**/*"
-  ]
-}
+  "include": ["src/**/*", ".storybook/**/*", "types/**/*", "package.json"]
+}

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;"}