@tcn/ui 0.13.1 → 0.15.0

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

@@ -1,7 +1,8 @@
 import { Key } from '../../../tokens/key/key.js';
 import { Value } from '../../../tokens/value/value.js';
-import { Row } from '../../row/row.js';
+import { Term } from '../../../tokens/term/term.js';
 import { Section } from '../section.js';
+import { Detail } from '../detail.js';
 import styles from './section.stories.module.css';
 import { Heading } from '../heading.js';
 
@@ -17,56 +18,84 @@ export const Default = () => {
       <div className={styles['stories-container']}>
         <Section>
           <Heading>Section 1</Heading>
-          <Rows />
+          <Detail>
+            <SBTermGroup />
+          </Detail>
           <Section>
             <Heading>Subsection 1 - 1</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 1 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 1 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 1 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
           </Section>
           <Section>
             <Heading>Subsection 1 - 2</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 2 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 2 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 2 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
           </Section>
           <Section>
             <Heading>Subsection 1 - 3</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 3 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 3 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 3 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
               <Section>
                 <Heading>Subsection 1 - 3 - 3 - 1</Heading>
-                <Rows />
+                <Detail>
+                  <SBTermGroup />
+                </Detail>
               </Section>
             </Section>
           </Section>
@@ -76,77 +105,77 @@ export const Default = () => {
   );
 };
 
-const Rows = () => {
+const SBTermGroup = () => {
   return (
     <>
-      <Row>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
+      </Term>
     </>
   );
 };

package/src/layouts/section/detail.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+
+export const Detail = React.forwardRef<HTMLDivElement, VStackProps>(function Detail(
+  { children, className, ...props },
+  ref
+) {
+  return (
+    <VStack ref={ref} className={clsx(className, 'tcn-detail')} {...props}>
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/section/index.ts

@@ -0,0 +1,3 @@
+export { Section } from './section.js';
+export { Heading, type HeadingOwnProps } from './heading.js';
+export { Detail } from './detail.js';

package/src/layouts/section/section.module.css

@@ -2,40 +2,4 @@
   :where(.section) {
     position: relative;
   }
-
-  :where(.heading) {
-    position: sticky;
-    height: 23px;
-    z-index: 4;
-    padding-inline-end: 8px;
-    user-select: none;
-  }
-
-  :where(.section > .heading) {
-    top: 0;
-    padding-inline: 8px 8px;
-    z-index: 3;
-  }
-
-  :where(.section > .section > .heading) {
-    top: 30px;
-    padding-inline: 12px 8px;
-    z-index: 2;
-  }
-
-  :where(.section > .section > .section > .heading) {
-    top: 60px;
-    padding-inline: 16px 8px;
-    z-index: 1;
-  }
-
-  :where(.section > .section > .section > .section > .heading) {
-    top: 90px;
-    padding-inline: 20px 8px;
-    z-index: 0;
-  }
-
-  .section > :not(.heading, .section) {
-    padding-inline-end: 8px;
-  }
 }

package/src/mobile/actions/button/mobile_button.module.css

@@ -0,0 +1,34 @@
+@layer tcn-system {
+  :where(.mobile-button) {
+    --button-height: calc(44px * var(--scalar, 1));
+
+    min-height: var(--button-height);
+    font-size: calc(18px * var(--scalar, 1));
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  :where(.mobile-button[data-size="sm"]) {
+    --button-height: calc(36px * var(--scalar, 1));
+  }
+
+  :where(.mobile-button[data-size="md"]) {
+    --button-height: calc(44px * var(--scalar, 1));
+  }
+
+  :where(.mobile-button[data-size="lg"]) {
+    --button-height: calc(52px * var(--scalar, 1));
+  }
+
+  :where(.mobile-button[data-size="sm"] .mobile-button-text) {
+    font-size: calc(16px * var(--scalar, 1));
+  }
+
+  :where(.mobile-button[data-size="md"] .mobile-button-text) {
+    font-size: calc(18px * var(--scalar, 1));
+  }
+
+  :where(.mobile-button[data-size="lg"] .mobile-button-text) {
+    font-size: calc(20px * var(--scalar, 1));
+  }
+}

package/src/mobile/actions/button/mobile_button.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { Spacer } from '../../../stacks/spacer.js';
+import { MobileButton, type MobileButtonProps } from './mobile_button.js';
+
+const meta: Meta<MobileButtonProps> = {
+  title: 'Mobile/MobileButton',
+  component: MobileButton,
+  tags: ['autodocs'],
+  args: {
+    hierarchy: 'secondary',
+    disabled: false,
+    size: 'md',
+    children: 'Click Me',
+  },
+  argTypes: {
+    hierarchy: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    severity: {
+      control: 'select',
+      options: ['neutral', 'dangerous', 'cautious', 'suggested', 'encouraged'],
+    },
+    color: { control: 'color' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<MobileButtonProps>;
+
+export const Default: Story = {};
+
+export const Primary: Story = {
+  args: {
+    hierarchy: 'primary',
+    children: 'Button Title',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    hierarchy: 'secondary',
+    children: 'Button Title',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    hierarchy: 'tertiary',
+    children: 'Button Title',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: 'Small Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: 'Large Button',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <span>Search</span>
+        <Spacer width="8px" />
+        <SearchIcon size="lg" />
+      </>
+    ),
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    color: '#00ff3c',
+    hierarchy: 'primary',
+    children: 'Custom Color',
+  },
+};

package/src/mobile/actions/button/mobile_button.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Button, type ButtonProps } from '../../../actions/button/button/button.js';
+import styles from './mobile_button.module.css';
+
+export interface MobileButtonProps extends ButtonProps {}
+
+export const MobileButton = React.forwardRef<HTMLButtonElement, MobileButtonProps>(
+  function MobileButton({ children, className, ...props }, ref) {
+    return (
+      <Button
+        ref={ref}
+        className={clsx(styles['mobile-button'], 'tcn-mobile-button', className)}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <span className={clsx(styles['mobile-button-text'], 'tcn-mobile-button-text')}>
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </Button>
+    );
+  }
+);

package/src/mobile/actions/floating_action_button/floating_action_button.module.css

@@ -0,0 +1,28 @@
+@layer tcn-system {
+  :where(.fab) {
+    --fab-size: calc(56px * var(--scalar, 1));
+
+    width: var(--fab-size);
+    height: var(--fab-size);
+    min-width: var(--fab-size);
+    min-height: var(--fab-size);
+    border-radius: 50%;
+    padding: 0;
+    box-shadow:
+      0 3px 5px -1px rgba(0, 0, 0, 0.2),
+      0 6px 10px 0 rgba(0, 0, 0, 0.14),
+      0 1px 18px 0 rgba(0, 0, 0, 0.12);
+  }
+
+  :where(.fab[data-size="sm"]) {
+    --fab-size: calc(40px * var(--scalar, 1));
+  }
+
+  :where(.fab[data-size="md"]) {
+    --fab-size: calc(56px * var(--scalar, 1));
+  }
+
+  :where(.fab[data-size="lg"]) {
+    --fab-size: calc(72px * var(--scalar, 1));
+  }
+}

package/src/mobile/actions/floating_action_button/floating_action_button.stories.tsx

@@ -0,0 +1,102 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import {
+  FloatingActionButton,
+  type FloatingActionButtonProps,
+} from './floating_action_button.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+
+const meta: Meta<FloatingActionButtonProps> = {
+  title: 'Mobile/FloatingActionButton',
+  component: FloatingActionButton,
+  tags: ['autodocs'],
+  args: {
+    hierarchy: 'secondary',
+    disabled: false,
+    size: 'md',
+    children: <PlusIcon size="lg" />,
+  },
+  argTypes: {
+    hierarchy: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    severity: {
+      control: 'select',
+      options: ['neutral', 'dangerous', 'cautious', 'suggested', 'encouraged'],
+    },
+    color: { control: 'color' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<FloatingActionButtonProps>;
+
+export const Default: Story = {};
+
+export const Primary: Story = {
+  args: {
+    hierarchy: 'primary',
+    children: <PlusIcon size="lg" />,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: <SearchIcon size="lg" />,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: <PlusIcon size="lg" />,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: <PlusIcon size="lg" />,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: <PlusIcon size="lg" />,
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    color: '#00ff3c',
+    hierarchy: 'primary',
+    children: <PlusIcon size="lg" />,
+  },
+};
+
+export const Placement: Story = {
+  args: {
+    children: <PlusIcon size="lg" />,
+    hierarchy: 'primary',
+  },
+  decorators: [
+    Story => (
+      <VStack
+        height="300px"
+        width="fill"
+        hAlign="end"
+        vAlign="end"
+        padding="16px"
+        style={{ backgroundColor: '#f5f5f5', borderRadius: '8px' }}
+      >
+        <Story />
+      </VStack>
+    ),
+  ],
+};

package/src/mobile/actions/floating_action_button/floating_action_button.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Button, type ButtonProps } from '../../../actions/button/button/button.js';
+import styles from './floating_action_button.module.css';
+
+export interface FloatingActionButtonProps extends ButtonProps {}
+
+export const FloatingActionButton = React.forwardRef<
+  HTMLButtonElement,
+  FloatingActionButtonProps
+>(function FloatingActionButton(
+  { children, className, hierarchy = 'secondary', ...props },
+  ref
+) {
+  return (
+    <Button
+      ref={ref}
+      className={clsx(styles.fab, 'tcn-fab', className)}
+      hierarchy={hierarchy}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});

package/src/mobile/inputs/date_picker/mobile_date_picker.module.css

@@ -0,0 +1,22 @@
+@layer tcn-system {
+  :where(.mobile-date-picker) {
+    outline: none;
+  }
+
+  :where(.mobile-date-picker-box) {
+    font-size: 14px;
+    border: 0;
+    border-radius: 4px;
+    padding: 4px;
+    box-sizing: border-box;
+    color: var(--font-color);
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(.mobile-date-picker-box[data-is-disabled="true"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}