@tcn/ui 0.8.1 → 0.9.0

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