@tcn/ui 0.3.3 → 0.4.0

package/src/actions/button/__stories__/button.stories.tsx

@@ -14,6 +14,7 @@ const meta: Meta<ButtonProps> = {
     disabled: false,
     children: 'Click Me',
     size: 'md',
+    utility: false,
   },
   argTypes: {
     hierarchy: {
@@ -28,6 +29,7 @@ const meta: Meta<ButtonProps> = {
     height: { control: 'text' },
     maxHeight: { control: 'text' },
     size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    utility: { control: 'boolean' },
   },
 };
 
@@ -99,6 +101,14 @@ export const WithIcon: Story = {
   },
 };
 
+// As Utility Button
+export const UtilityButton: Story = {
+  args: {
+    utility: true,
+    children: <SearchIcon />,
+  },
+};
+
 // Dynamic Styles
 export const DynamicStyles: Story = {
   args: {

package/src/actions/button/__stories__/toggle.stories.tsx

@@ -0,0 +1,177 @@
+// Toggle.stories.tsx
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { Spacer } from '../../../stacks/spacer.js';
+import { Toggle, ToggleProps } from '../../toggle/toggle.js';
+import { useState } from 'react';
+
+type SBToggleStoryProps = Pick<
+  ToggleProps,
+  | 'disabled'
+  | 'size'
+  | 'color'
+  | 'minWidth'
+  | 'width'
+  | 'maxWidth'
+  | 'minHeight'
+  | 'height'
+  | 'maxHeight'
+>;
+
+const ToggleStoryComponent: React.FC<SBToggleStoryProps> = args => {
+  const [selected, setSelected] = useState(false);
+  return (
+    <Toggle selected={selected} onClick={() => setSelected(!selected)} {...args}>
+      Caps Lock
+    </Toggle>
+  );
+};
+
+const meta: Meta<SBToggleStoryProps> = {
+  title: 'Actions/Toggle',
+  component: ToggleStoryComponent,
+  tags: ['autodocs'],
+  args: {
+    disabled: false,
+    size: 'md',
+  },
+  argTypes: {
+    color: { control: 'color' },
+    minWidth: { control: 'text' },
+    width: { control: 'text' },
+    maxWidth: { control: 'text' },
+    minHeight: { control: 'text' },
+    height: { control: 'text' },
+    maxHeight: { control: 'text' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ToggleProps>;
+
+// Default Toggle
+export const Baseline: Story = {};
+
+export const Selected: Story = {
+  args: {
+    selected: true,
+    children: 'Toggle Title',
+  },
+};
+
+export const Unselected: Story = {
+  args: {
+    selected: false,
+    children: 'Toggle Title',
+  },
+};
+
+// Disabled States
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Toggle Title',
+  },
+};
+
+// Custom Dimensions
+export const CustomDimensions: Story = {
+  args: {
+    minWidth: '120px',
+    minHeight: '50px',
+    width: '150px',
+    height: '60px',
+    children: 'Custom Size',
+  },
+};
+
+// Custom Dimensions
+export const MaxWidth: Story = {
+  args: {
+    maxWidth: '120px',
+    children: 'Really Long Toggle Text With A ReallyLongWordIncluded',
+  },
+};
+
+// With Icon
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <span>Search</span>
+        <Spacer width="8px" />
+        <SearchIcon size="lg" />
+      </>
+    ),
+  },
+};
+
+// Icon Only (Utility)
+export const Icon: Story = {
+  args: {
+    util: true,
+    children: <SearchIcon size="lg" />,
+  } as ToggleProps,
+};
+
+// Dynamic Styles
+export const DynamicStyles: Story = {
+  args: {
+    color: '#00ff3c',
+    children: 'Dynamic Colors',
+    selected: true,
+  },
+};
+
+// Dynamic Styles via Variables
+export const ToggleCSSVariables: Story = {
+  args: {
+    children: 'Toggle With Action Style',
+  },
+  argTypes: {
+    className: {
+      control: 'select',
+      options: ['action-primary', 'action-secondary', 'action-tertiary'],
+    },
+  },
+};
+
+// Long Text
+export const LongText: Story = {
+  args: {
+    children:
+      'This is a very long toggle text to demonstrate how the toggle behaves with long content.',
+  },
+};
+
+export const DarkBackground: Story = {
+  args: {},
+  argTypes: {
+    className: {
+      control: 'select',
+      options: ['action-primary', 'action-secondary', 'action-tertiary'],
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={
+          {
+            backgroundColor: '#2F3437',
+            '--surface-color': '#2F3437',
+            padding: '20px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            minHeight: '100px',
+          } as any
+        }
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/actions/button/base_button/base_button.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import type { Hierarchy, Size } from '../../../utils/index.js';
+import type { Size } from '../../../utils/index.js';
 import { HStack } from '../../../stacks/h_stack.js';
 import type { HStackOwnProps } from '../../../stacks/h_stack.js';
 import styles from './base_button.module.css';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import type { ActionSeverity } from '../../types.js';
 
 export interface BaseButtonOwnProps {
-  hierarchy?: Hierarchy;
   size?: Size;
   color?: string;
-  severity?: ActionSeverity;
+  utility?: boolean;
 }
 
 export type BaseButtonWithStackProps = BaseButtonOwnProps &
@@ -28,9 +26,9 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       className,
       style,
       color,
-      hierarchy = 'secondary',
-      severity = 'neutral',
       size = 'md',
+      utility = false,
+      disabled = false,
       onTouchStart,
       onContextMenu,
       ...props
@@ -53,7 +51,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       onContextMenu(event);
     };
 
-    const finalStyle: React.CSSProperties = {
+    const finalStyle: React.CSSProperties & Record<string, any> = {
       ...style,
     };
 
@@ -69,10 +67,10 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         inline
         vAlign="center"
         hAlign="center"
-        data-severity={severity}
-        data-hierarchy={hierarchy}
         data-size={size}
-        data-is-disabled={Boolean(props.disabled)}
+        data-is-utility={utility}
+        aria-disabled={disabled}
+        data-is-disabled={disabled}
         className={clsx(
           styles['base-button'],
           'tcn-interactive',

package/src/actions/button/button/button.tsx

@@ -2,17 +2,26 @@ import React from 'react';
 import { clsx } from 'clsx';
 import { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';
 import styles from './button.module.css';
+import type { ActionSeverity } from '../../types.js';
+import type { Hierarchy } from '../../../utils/index.js';
 
-export interface ButtonProps extends BaseButtonProps {}
+export interface ButtonOwnProps {
+  severity?: ActionSeverity;
+  hierarchy?: Hierarchy;
+}
+
+export interface ButtonProps extends BaseButtonProps, ButtonOwnProps {}
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { children, className, ...props },
+  { children, className, severity = 'neutral', hierarchy = 'secondary', ...props },
   ref
 ) {
   return (
     <BaseButton
       ref={ref}
       className={clsx(styles.button, 'tcn-button', className)}
+      data-severity={severity}
+      data-hierarchy={hierarchy}
       {...props}
     >
       {typeof children === 'string' ? (

package/src/actions/button/slim_button/slim_button.tsx

@@ -4,16 +4,23 @@ import { clsx } from 'clsx';
 // Styles
 import styles from './slim_button.module.css';
 
-export const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        className={clsx(styles['slim-button'], 'tcn-slim-button', className)}
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
+/**
+ * @deprecated - use Button instead (utility=true)
+ * @param props - ButtonProps
+ * @returns SlimButton
+ */
+export const SlimButton = React.forwardRef<
+  HTMLButtonElement,
+  Omit<ButtonProps, 'utility'>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <Button
+      ref={ref}
+      className={clsx(styles['slim-button'], 'tcn-slim-button', className)}
+      utility={true}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});

package/src/actions/toggle/toggle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { BaseButton, type BaseButtonProps } from '../button/base_button/base_button.js';
+
+export interface ToggleOwnProps {
+  selected?: boolean;
+}
+
+export interface ToggleProps extends BaseButtonProps, ToggleOwnProps {}
+
+export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(
+  { selected = false, children, className, ...props },
+  ref
+) {
+  return (
+    <BaseButton
+      aria-pressed={selected}
+      data-is-selected={selected}
+      ref={ref}
+      className={clsx('tcn-toggle', className)}
+      {...props}
+    >
+      {children}
+    </BaseButton>
+  );
+});

package/src/inputs/mask_input/mask.ts

@@ -7,7 +7,13 @@ import { MaskConfig } from './mask_config.js';
 import { MaskCursor } from './mask_cursor.js';
 import { NumericCharacter } from './numeric_character.js';
 
-const characterMap = {
+const characterMap: Record<
+  string,
+  | typeof AlphaCharacter
+  | typeof NumericCharacter
+  | typeof AlphaNumericCharacter
+  | typeof LanguageCharacter
+> = {
   a: AlphaCharacter,
   '9': NumericCharacter,
   '*': AlphaNumericCharacter,

package/src/layouts/index.ts

@@ -3,13 +3,14 @@ export * from './divider/divider.js';
 export * from './grid/grid.js';
 export * from './list/item.js';
 export * from './list/list.js';
-export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-// Scaffold
+
 export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
 export { HBody, type HBodyProps } from './body/h_body.js';
 export { VBody, type VBodyProps } from './body/v_body.js';
 export { Footer, type FooterProps } from './footer/footer.js';
 export { Header, type HeaderProps } from './header/header.js';
 export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
+export { Row } from './row/row.js';
+export { Section } from './section/section.js';

package/src/layouts/row/row.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  :where(.row) {
+    padding-block: 4px;
+  }
+}

package/src/layouts/row/row.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { HStackProps, HStack } from '../../stacks/h_stack.js';
+import { clsx } from 'clsx';
+import styles from './row.module.css';
+
+export const Row = React.forwardRef<HTMLDivElement, HStackProps>(function Row(
+  { children, className, as = 'div', ...props },
+  ref
+) {
+  return (
+    <HStack ref={ref} className={clsx(className, styles.row, 'tcn-row')} {...props}>
+      {children}
+    </HStack>
+  );
+});

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

@@ -0,0 +1,6 @@
+.stories-container {
+  width: 300px;
+  min-height: 400px;
+  max-height: 400px;
+  overflow: auto;
+}

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

@@ -0,0 +1,152 @@
+import { Key } from '../../../tokens/key/key.js';
+import { Value } from '../../../tokens/value/value.js';
+import { Row } from '../../row/row.js';
+import { Section } from '../section.js';
+import styles from './section.stories.module.css';
+import { Heading } from '../heading.js';
+
+export default {
+  title: 'Layouts/Section',
+  component: Section,
+  tags: ['autodocs'],
+};
+
+export const Default = () => {
+  return (
+    <>
+      <div className={styles['stories-container']}>
+        <Section>
+          <Heading>Section 1</Heading>
+          <Rows />
+          <Section>
+            <Heading>Subsection 1 - 1</Heading>
+            <Rows />
+            <Section>
+              <Heading>Subsection 1 - 1 - 1</Heading>
+              <Rows />
+            </Section>
+            <Section>
+              <Heading>Subsection 1 - 1 - 2</Heading>
+              <Rows />
+            </Section>
+            <Section>
+              <Heading>Subsection 1 - 1 - 3</Heading>
+              <Rows />
+            </Section>
+          </Section>
+          <Section>
+            <Heading>Subsection 1 - 2</Heading>
+            <Rows />
+            <Section>
+              <Heading>Subsection 1 - 2 - 1</Heading>
+              <Rows />
+            </Section>
+            <Section>
+              <Heading>Subsection 1 - 2 - 2</Heading>
+              <Rows />
+            </Section>
+            <Section>
+              <Heading>Subsection 1 - 2 - 3</Heading>
+              <Rows />
+            </Section>
+          </Section>
+          <Section>
+            <Heading>Subsection 1 - 3</Heading>
+            <Rows />
+            <Section>
+              <Heading>Subsection 1 - 3 - 1</Heading>
+              <Rows />
+            </Section>
+            <Section>
+              <Heading>Subsection 1 - 3 - 2</Heading>
+              <Rows />
+            </Section>
+            <Section>
+              <Heading>Subsection 1 - 3 - 3</Heading>
+              <Rows />
+              <Section>
+                <Heading>Subsection 1 - 3 - 3 - 1</Heading>
+                <Rows />
+              </Section>
+            </Section>
+          </Section>
+        </Section>
+      </div>
+    </>
+  );
+};
+
+const Rows = () => {
+  return (
+    <>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+      <Row>
+        <Key>Key</Key>
+        <Value>Value</Value>
+      </Row>
+    </>
+  );
+};

package/src/layouts/section/heading.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import styles from './section.module.css';
+
+export interface HeadingOwnProps extends HStackProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const Heading = ({ children, className, ...props }: HeadingOwnProps) => {
+  return (
+    <HStack className={clsx(className, styles.heading, 'tcn-heading')} {...props}>
+      {children}
+    </HStack>
+  );
+};

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

@@ -0,0 +1,41 @@
+@layer tcn-system {
+  :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/layouts/section/section.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import styles from './section.module.css';
+
+export const Section = React.forwardRef<HTMLDivElement, VStackProps>(function Section(
+  { children, className, as = 'section', style, ...props },
+  ref
+) {
+  return (
+    <VStack
+      as={as}
+      ref={ref}
+      className={clsx(className, 'tcn-surface', styles.section, 'tcn-section')}
+      style={style}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/navigation/tabs/primitives/tabs_list.tsx

@@ -1,7 +1,8 @@
 import { forwardRef, type FC, type PropsWithChildren } from 'react';
-import { BaseButton, type BaseButtonProps } from '../../../actions/index.js';
+import { type BaseButtonProps } from '../../../actions/index.js';
 import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
 import clsx from 'clsx';
+import { Toggle } from '../../../actions/toggle/toggle.js';
 
 export type TabsListProps = HStackProps;
 
@@ -26,17 +27,15 @@ export interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {
 export const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(
   ({ children, className, role = 'tab', selected = false, ...props }, ref) => {
     return (
-      <BaseButton
+      <Toggle
         ref={ref}
         role={role}
         className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}
-        hierarchy="tertiary"
-        data-is-selected={selected}
-        aria-selected={selected}
+        selected={selected}
         {...props}
       >
         {children}
-      </BaseButton>
+      </Toggle>
     );
   }
 );