@tcn/ui 0.8.1 → 0.10.0

package/dist/layouts/rail/main/main.js

@@ -1,21 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import i from "react";
-import { clsx as c } from "clsx";
-import { HStack as s } from "../../../stacks/h_stack.js";
-import '../../../main.css';const e = "_main_bc17de6", f = { main: e }, x = i.forwardRef(function({ children: t, className: o, overflowX: a = "auto", ...m }, n) {
-  return /* @__PURE__ */ r(
-    s,
-    {
-      ref: n,
-      as: "div",
-      overflowX: a,
-      className: c(f.main, o, "tcn-main"),
-      ...m,
-      children: t
-    }
-  );
-});
-export {
-  x as Main
-};
-//# sourceMappingURL=main.js.map

package/dist/layouts/rail/main/main.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.js","sources":["../../../../src/layouts/rail/main/main.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\n\n// Styles\nimport styles from './main.module.css';\n\nexport interface MainProps extends Omit<HStackProps, 'as'> {}\n\n// WIP: This component is not fully implemented.\nexport const Main = React.forwardRef<HTMLElement, MainProps>(function Main(\n  { children, className, overflowX = 'auto', ...props }: MainProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      overflowX={overflowX}\n      className={clsx(styles['main'], className, 'tcn-main')}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Main","React","children","className","overflowX","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;4CAUaA,IAAOC,EAAM,WAAmC,SAC3D,EAAE,UAAAC,GAAU,WAAAC,GAAW,WAAAC,IAAY,QAAQ,GAAGC,EAAA,GAC9CC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAAF;AAAA,MACA,WAAWK,EAAKC,EAAO,MAASP,GAAW,UAAU;AAAA,MACpD,GAAGE;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/main.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._main_bc17de6){min-width:0;flex-grow:1;height:100%}}

package/dist/subheadline.module-C-v7zMkQ.js

@@ -1,5 +0,0 @@
-import './subheadline.css';const s = "_subheadline_ae8bc38", e = { subheadline: s };
-export {
-  e as s
-};
-//# sourceMappingURL=subheadline.module-C-v7zMkQ.js.map

package/dist/subheadline.module-C-v7zMkQ.js.map

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

package/dist/surfaces/panel/h_panel.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { BoxProps } from '../../stacks/box/box.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-export interface HPanelProps extends Omit<BoxProps, 'as'> {
-    vAlign?: Alignment;
-    hAlign?: Alignment;
-}
-export declare const HPanel: React.ForwardRefExoticComponent<HPanelProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=h_panel.d.ts.map

package/dist/surfaces/panel/h_panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_panel.d.ts","sourceRoot":"","sources":["../../../src/surfaces/panel/h_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,iFAmDjB,CAAC"}

package/dist/surfaces/panel/h_panel.js

@@ -1,60 +0,0 @@
-import { jsx as p } from "react/jsx-runtime";
-import u from "react";
-import { clsx as r } from "clsx";
-import { Box as x } from "../../stacks/box/box.js";
-import { HStack as i } from "../../stacks/h_stack.js";
-import '../../h_panel.css';const P = "_panel-stack_f1896f3", f = { "panel-stack": P }, B = u.forwardRef(function({
-  children: m,
-  width: k,
-  height: d,
-  minWidth: a,
-  maxWidth: t,
-  minHeight: n,
-  maxHeight: e,
-  hAlign: c,
-  vAlign: o = "start",
-  className: l,
-  ..._
-}, s) {
-  return /* @__PURE__ */ p(
-    x,
-    {
-      ref: s,
-      width: k,
-      height: d,
-      minWidth: a,
-      maxWidth: t,
-      minHeight: n,
-      maxHeight: e,
-      "data-h-alignment": c,
-      "data-v-alignment": o,
-      className: r(f.panel, l, "panel", "tcn-panel", "tcn-h-panel"),
-      ..._,
-      children: /* @__PURE__ */ p(
-        i,
-        {
-          as: "section",
-          minWidth: a,
-          maxWidth: t,
-          minHeight: n,
-          maxHeight: e,
-          hAlign: c,
-          vAlign: o,
-          ref: s,
-          className: r(
-            f["panel-stack"],
-            l,
-            "panel-stack",
-            "tcn-panel-stack"
-          ),
-          zIndex: 0,
-          children: m
-        }
-      )
-    }
-  );
-});
-export {
-  B as HPanel
-};
-//# sourceMappingURL=h_panel.js.map

package/dist/surfaces/panel/h_panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_panel.js","sources":["../../../src/surfaces/panel/h_panel.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\n// Styles\nimport styles from './panel.module.css';\n\nexport interface HPanelProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\nexport const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign,\n    vAlign = 'start',\n    className,\n    ...props\n  }: HPanelProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      data-h-alignment={hAlign}\n      data-v-alignment={vAlign}\n      className={clsx(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}\n      {...props}\n    >\n      <HStack\n        as=\"section\"\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        className={clsx(\n          styles['panel-stack'],\n          className,\n          'panel-stack',\n          'tcn-panel-stack'\n        )}\n        zIndex={0}\n      >\n        {children}\n      </HStack>\n    </Box>\n  );\n});\n"],"names":["HPanel","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","HStack"],"mappings":";;;;;4DAaaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM,EAAKC,EAAO,OAAUN,GAAW,SAAS,aAAa,aAAa;AAAA,MAC9E,GAAGC;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG;AAAA,YACTC,EAAO,aAAa;AAAA,YACpBN;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,QAAQ;AAAA,UAEP,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/surfaces/panel/v_panel.d.ts

@@ -1,5 +0,0 @@
-import { default as React } from 'react';
-import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
-export type VPanelProps = ScaffoldProps;
-export declare const VPanel: React.ForwardRefExoticComponent<ScaffoldProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=v_panel.d.ts.map

package/dist/surfaces/panel/v_panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_panel.d.ts","sourceRoot":"","sources":["../../../src/surfaces/panel/v_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGlF,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC;AAExC,eAAO,MAAM,MAAM,mFAajB,CAAC"}

package/dist/surfaces/panel/v_panel.js

@@ -1,19 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import f from "react";
-import { Scaffold as n } from "../../layouts/scaffold/scaffold.js";
-import c from "clsx";
-const u = f.forwardRef(function({ children: r, className: o, ...t }, a) {
-  return /* @__PURE__ */ e(
-    n,
-    {
-      ref: a,
-      className: c("tcn-surface", "tcn-panel", "tcn-v-panel", o),
-      ...t,
-      children: r
-    }
-  );
-});
-export {
-  u as VPanel
-};
-//# sourceMappingURL=v_panel.js.map

package/dist/surfaces/panel/v_panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_panel.js","sources":["../../../src/surfaces/panel/v_panel.tsx"],"sourcesContent":["import React from 'react';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\nimport clsx from 'clsx';\n\nexport type VPanelProps = ScaffoldProps;\n\nexport const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel(\n  { children, className, ...props }: VPanelProps,\n  ref\n) {\n  return (\n    <Scaffold\n      ref={ref}\n      className={clsx('tcn-surface', 'tcn-panel', 'tcn-v-panel', className)}\n      {...props}\n    >\n      {children}\n    </Scaffold>\n  );\n});\n"],"names":["VPanel","React","children","className","props","ref","jsx","Scaffold","clsx"],"mappings":";;;;AAMO,MAAMA,IAASC,EAAM,WAAqC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAK,eAAe,aAAa,eAAeL,CAAS;AAAA,MACnE,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/utility_bar.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._utility-bar_3a92315){width:100%;min-height:0}}

package/dist/utils/responsive/responsive_renderer.d.ts

@@ -1,21 +0,0 @@
-import { default as React } from 'react';
-export interface ResponsiveRendererProps {
-    /**
-     * Component to render on mobile devices (width < 768px)
-     */
-    mobile: React.ReactNode;
-    /**
-     * Component to render on desktop devices (width >= 768px)
-     */
-    desktop: React.ReactNode;
-    /**
-     * Optional breakpoint in pixels. Defaults to 768px
-     */
-    breakpoint?: number;
-}
-/**
- * A component that renders different content based on screen size.
- * Uses the useMediaQuery hook to detect screen size changes.
- */
-export declare function ResponsiveRenderer({ mobile, desktop, breakpoint, }: ResponsiveRendererProps): React.ReactNode;
-//# sourceMappingURL=responsive_renderer.d.ts.map

package/dist/utils/responsive/responsive_renderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"responsive_renderer.d.ts","sourceRoot":"","sources":["../../../src/utils/responsive/responsive_renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAO,EACP,UAAgB,GACjB,EAAE,uBAAuB,mBAIzB"}

package/dist/utils/responsive/responsive_renderer.js

@@ -1,12 +0,0 @@
-import { useMediaQuery as r } from "../hooks/use_media_query.js";
-function n({
-  mobile: e,
-  desktop: i,
-  breakpoint: o = 450
-}) {
-  return r(`(min-width: ${o}px)`) ? i : e;
-}
-export {
-  n as ResponsiveRenderer
-};
-//# sourceMappingURL=responsive_renderer.js.map

package/dist/utils/responsive/responsive_renderer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"responsive_renderer.js","sources":["../../../src/utils/responsive/responsive_renderer.tsx"],"sourcesContent":["import React from 'react';\nimport { useMediaQuery } from '../hooks/use_media_query.js';\n\nexport interface ResponsiveRendererProps {\n  /**\n   * Component to render on mobile devices (width < 768px)\n   */\n  mobile: React.ReactNode;\n  /**\n   * Component to render on desktop devices (width >= 768px)\n   */\n  desktop: React.ReactNode;\n  /**\n   * Optional breakpoint in pixels. Defaults to 768px\n   */\n  breakpoint?: number;\n}\n\n/**\n * A component that renders different content based on screen size.\n * Uses the useMediaQuery hook to detect screen size changes.\n */\nexport function ResponsiveRenderer({\n  mobile,\n  desktop,\n  breakpoint = 450,\n}: ResponsiveRendererProps) {\n  const isDesktop = useMediaQuery(`(min-width: ${breakpoint}px)`);\n\n  return isDesktop ? desktop : mobile;\n}\n"],"names":["ResponsiveRenderer","mobile","desktop","breakpoint","useMediaQuery"],"mappings":";AAsBO,SAASA,EAAmB;AAAA,EACjC,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAA4B;AAG1B,SAFkBC,EAAc,eAAeD,CAAU,KAAK,IAE3CD,IAAUD;AAC/B;"}

package/dist/v_body.css

@@ -1 +0,0 @@
-@layer tcn-system{._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}}

package/src/layouts/header/header.module.css

@@ -1,8 +0,0 @@
-@layer tcn-system {
-  :where(.header) {
-    width: 100%;
-    min-height: 0;
-    padding: var(--padding) var(--padding-large);
-    gap: var(--gap);
-  }
-}

package/src/layouts/rail/__stories__/rail.stories.tsx

@@ -1,64 +0,0 @@
-import { Main } from '../main/main.js';
-import { Rail } from '../rail.js';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Side } from '../side/side.js';
-import { VStack } from '../../../stacks/v_stack.js';
-
-import styles from './rail_stories.module.css';
-
-const meta: Meta<typeof Rail> = {
-  title: 'Layouts/Rail',
-  component: Rail,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'A rail component that lays out content in a horizontal hierarchy.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Rail>;
-
-const Content = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <VStack hAlign="start" className={styles.content}>
-      {children}
-    </VStack>
-  );
-};
-
-export const Baseline: Story = {
-  args: {
-    height: '100vh',
-  },
-  render: () => (
-    <Rail height="100vh" className={styles.rail}>
-      <Side className={styles.side}>
-        <p>Side (Start)</p>
-        <p>Fills available space</p>
-        <p>Scrolls horizontally</p>
-      </Side>
-
-      <Main className={styles.main}>
-        <Content>
-          <p>Main</p>
-          <p>Fills available space</p>
-          <p>Scrolls horizontally</p>
-        </Content>
-        <Content />
-        <Content />
-        <Content />
-        <Content />
-      </Main>
-      <Side className={styles.side}>
-        <p>Side (End)</p>
-        <p>Fills available space</p>
-        <p>Scrolls horizontally</p>
-      </Side>
-    </Rail>
-  ),
-};

package/src/layouts/rail/__stories__/rail_stories.module.css

@@ -1,25 +0,0 @@
-.rail {
-  :global(.tcn-rail-stack) {
-    gap: 8px;
-  }
-}
-
-.main {
-  background-color: #f1f5f9;
-  gap: 16px;
-  padding: 16px 0;
-}
-
-.side {
-  width: 200px;
-  background-color: #3b82f6;
-  color: white;
-  padding: 16px 0;
-}
-
-.content {
-  background-color: #e5e7eb;
-  min-width: 200px;
-  height: 100%;
-  padding: 16px;
-}

package/src/layouts/rail/main/main.module.css

@@ -1,7 +0,0 @@
-@layer tcn-system {
-  :where(.main) {
-    min-width: 0;
-    flex-grow: 1;
-    height: 100%;
-  }
-}

package/src/layouts/rail/main/main.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { clsx } from 'clsx';
-import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
-
-// Styles
-import styles from './main.module.css';
-
-export interface MainProps extends Omit<HStackProps, 'as'> {}
-
-// WIP: This component is not fully implemented.
-export const Main = React.forwardRef<HTMLElement, MainProps>(function Main(
-  { children, className, overflowX = 'auto', ...props }: MainProps,
-  ref
-) {
-  return (
-    <HStack
-      ref={ref}
-      as="div"
-      overflowX={overflowX}
-      className={clsx(styles['main'], className, 'tcn-main')}
-      {...props}
-    >
-      {children}
-    </HStack>
-  );
-});

package/src/layouts/scaffold/__stories__/scaffold.stories.tsx

@@ -1,53 +0,0 @@
-import { Scaffold } from '../scaffold.js';
-import { Header } from '../../header/header.js';
-import { UtilityBar } from '../../utility_bar/utility_bar.js';
-import { VBody } from '../../body/v_body.js';
-import { Footer } from '../../footer/footer.js';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { HStack } from '../../../stacks/h_stack.js';
-
-import styles from './scaffold_stories.module.css';
-
-const meta: Meta<typeof Scaffold> = {
-  title: 'Layouts/Scaffold',
-  component: Scaffold,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'A scaffold component that lays out content in a vertical hierarchy.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Scaffold>;
-
-const Content = () => {
-  return <HStack className={styles.content} />;
-};
-
-export const Baseline: Story = {
-  args: {
-    height: '100vh',
-  },
-  render: () => (
-    <Scaffold height="100vh">
-      <Header className={styles.header}>Header</Header>
-      <UtilityBar className={styles.utilityBar}>Utility Bar</UtilityBar>
-      <VBody className={styles.body}>
-        <p>(V)Body</p>
-        <p>Fills available space</p>
-        <p>Scrolls vertically</p>
-        <Content />
-        <Content />
-        <Content />
-        <Content />
-        <Content />
-      </VBody>
-      <Footer className={styles.footer}>Footer</Footer>
-    </Scaffold>
-  ),
-};

package/src/layouts/scaffold/__stories__/scaffold_stories.module.css

@@ -1,31 +0,0 @@
-.header {
-  height: 56px;
-  background-color: #3b82f6;
-  color: white;
-}
-
-.utilityBar {
-  height: 40px;
-  background-color: #8b5cf6;
-  color: white;
-}
-
-.body {
-  background-color: #f1f5f9;
-}
-
-.footer {
-  height: 48px;
-  background-color: #10b981;
-  color: white;
-}
-
-.level {
-  background-color: #0ab4d2;
-  color: white;
-}
-
-.content {
-  background-color: #e5e7eb;
-  height: 100px;
-}

package/src/surfaces/panel/h_panel.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { clsx } from 'clsx';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import { HStack } from '../../stacks/h_stack.js';
-import type { Alignment } from '../../stacks/types/alignment.js';
-// Styles
-import styles from './panel.module.css';
-
-export interface HPanelProps extends Omit<BoxProps, 'as'> {
-  vAlign?: Alignment;
-  hAlign?: Alignment;
-}
-
-export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel(
-  {
-    children,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    hAlign,
-    vAlign = 'start',
-    className,
-    ...props
-  }: HPanelProps,
-  ref
-) {
-  return (
-    <Box
-      ref={ref}
-      width={width}
-      height={height}
-      minWidth={minWidth}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      maxHeight={maxHeight}
-      data-h-alignment={hAlign}
-      data-v-alignment={vAlign}
-      className={clsx(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}
-      {...props}
-    >
-      <HStack
-        as="section"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        hAlign={hAlign}
-        vAlign={vAlign}
-        ref={ref}
-        className={clsx(
-          styles['panel-stack'],
-          className,
-          'panel-stack',
-          'tcn-panel-stack'
-        )}
-        zIndex={0}
-      >
-        {children}
-      </HStack>
-    </Box>
-  );
-});

package/src/surfaces/panel/v_panel.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
-import clsx from 'clsx';
-
-export type VPanelProps = ScaffoldProps;
-
-export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel(
-  { children, className, ...props }: VPanelProps,
-  ref
-) {
-  return (
-    <Scaffold
-      ref={ref}
-      className={clsx('tcn-surface', 'tcn-panel', 'tcn-v-panel', className)}
-      {...props}
-    >
-      {children}
-    </Scaffold>
-  );
-});

package/src/utils/responsive/responsive_renderer.stories.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react-vite';
-import { BodyText } from '../../typography/index.js';
-import { StyleBox } from '../../stacks/story_components/style_box.js';
-import { ResponsiveRenderer as ResponsiveRendererComponent } from './responsive_renderer.js';
-
-const meta: Meta<typeof ResponsiveRendererComponent> = {
-  title: 'Utils/Responsive Renderer',
-  component: ResponsiveRendererComponent,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-export function ResponsiveRenderer() {
-  return (
-    <ResponsiveRendererComponent
-      mobile={
-        <StyleBox
-          className="surface-primary"
-          padding="16px"
-          borderRadius="8px"
-          boxShadow="0 2px 4px rgba(0,0,0,0.1)"
-        >
-          <BodyText>Mobile Layout</BodyText>
-          <BodyText>This content is optimized for smaller screens</BodyText>
-        </StyleBox>
-      }
-      desktop={
-        <StyleBox
-          className="surface-primary"
-          padding="24px"
-          borderRadius="8px"
-          boxShadow="0 4px 8px rgba(0,0,0,0.1)"
-          width="400px"
-        >
-          <BodyText>Desktop Layout</BodyText>
-          <BodyText>This content is optimized for larger screens</BodyText>
-        </StyleBox>
-      }
-    />
-  );
-}
-
-export function CustomBreakpoint() {
-  return (
-    <ResponsiveRendererComponent
-      breakpoint={1024}
-      mobile={
-        <StyleBox
-          className="surface-primary"
-          padding="16px"
-          borderRadius="8px"
-          boxShadow="0 2px 4px rgba(0,0,0,0.1)"
-        >
-          <BodyText>Tablet/Mobile Layout</BodyText>
-          <BodyText>Shows on screens smaller than 1024px</BodyText>
-        </StyleBox>
-      }
-      desktop={
-        <StyleBox
-          className="surface-primary"
-          padding="24px"
-          borderRadius="8px"
-          boxShadow="0 4px 8px rgba(0,0,0,0.1)"
-          width="400px"
-        >
-          <BodyText>Large Desktop Layout</BodyText>
-          <BodyText>Shows on screens 1024px and larger</BodyText>
-        </StyleBox>
-      }
-    />
-  );
-}

package/src/utils/responsive/responsive_renderer.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useMediaQuery } from '../hooks/use_media_query.js';
-
-export interface ResponsiveRendererProps {
-  /**
-   * Component to render on mobile devices (width < 768px)
-   */
-  mobile: React.ReactNode;
-  /**
-   * Component to render on desktop devices (width >= 768px)
-   */
-  desktop: React.ReactNode;
-  /**
-   * Optional breakpoint in pixels. Defaults to 768px
-   */
-  breakpoint?: number;
-}
-
-/**
- * A component that renders different content based on screen size.
- * Uses the useMediaQuery hook to detect screen size changes.
- */
-export function ResponsiveRenderer({
-  mobile,
-  desktop,
-  breakpoint = 450,
-}: ResponsiveRendererProps) {
-  const isDesktop = useMediaQuery(`(min-width: ${breakpoint}px)`);
-
-  return isDesktop ? desktop : mobile;
-}