@tcn/ui 0.17.0 → 0.18.1

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

@@ -1,274 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { CrossIcon } from '@tcn/icons/cross_icon.js';
-import { theme } from '../../../themes/index.js';
-import { HStack } from '../../../stacks/h_stack.js';
-import { ZStack } from '../../../stacks/z_stack.js';
-import { ButtonProps } from '../button/button.js';
-import { SlimButton } from '../slim_button/slim_button.js';
-
-const meta: Meta<ButtonProps> = {
-  title: 'Actions/Slim Button',
-  component: SlimButton,
-  tags: ['autodocs'],
-  args: {
-    hierarchy: 'secondary',
-    disabled: false,
-    size: 'md',
-  },
-  argTypes: {
-    hierarchy: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary'],
-    },
-    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<ButtonProps>;
-
-// Default Button
-export const Default: Story = {
-  args: {
-    hierarchy: 'primary',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-export const Primary: Story = {
-  args: {
-    hierarchy: 'primary',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-export const Secondary: Story = {
-  args: {
-    hierarchy: 'secondary',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-export const Tertiary: Story = {
-  args: {
-    hierarchy: 'tertiary',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-// Disabled States
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-// Custom Dimensions
-export const CustomDimensions: Story = {
-  args: {
-    minWidth: '120px',
-    minHeight: '50px',
-    width: '150px',
-    height: '60px',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-// Dynamic Styles
-export const DynamicStyles: Story = {
-  args: {
-    color: '#00fa3a',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-// Dynamic Styles via Variables
-export const ButtonCSSVariables: Story = {
-  args: {
-    children: <CrossIcon />,
-  },
-  argTypes: {
-    className: {
-      control: 'select',
-      options: ['action-primary', 'action-secondary', 'action-tertiary'],
-    },
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-export const DarkBackground: Story = {
-  args: {
-    children: <CrossIcon />,
-  },
-  argTypes: {
-    className: {
-      control: 'select',
-      options: ['action-primary', 'action-secondary', 'action-tertiary'],
-    },
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-export const Small: Story = {
-  args: {
-    size: 'sm',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-export const Medium: Story = {
-  args: {
-    size: 'md',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-export const Large: Story = {
-  args: {
-    size: 'lg',
-    children: <CrossIcon />,
-  },
-  decorators: [
-    Story => (
-      <ZStack>
-        <Story />
-      </ZStack>
-    ),
-  ],
-};
-
-// Size Comparison
-export const SizeComparison: Story = {
-  render: () => (
-    <HStack hAlign="center" gap={theme.padding.md}>
-      <SlimButton size="sm" hierarchy="primary">
-        <CrossIcon />
-      </SlimButton>
-      <SlimButton size="md" hierarchy="primary">
-        <CrossIcon />
-      </SlimButton>
-      <SlimButton size="lg" hierarchy="primary">
-        <CrossIcon />
-      </SlimButton>
-    </HStack>
-  ),
-};
-
-// Size Comparison with Secondary Hierarchy
-export const SizeComparisonSecondary: Story = {
-  render: () => (
-    <HStack hAlign="center" gap={theme.padding.md}>
-      <SlimButton size="sm" hierarchy="secondary">
-        <CrossIcon />
-      </SlimButton>
-      <SlimButton size="md" hierarchy="secondary">
-        <CrossIcon />
-      </SlimButton>
-      <SlimButton size="lg" hierarchy="secondary">
-        <CrossIcon />
-      </SlimButton>
-    </HStack>
-  ),
-};
-
-// Size Comparison with Tertiary Hierarchy
-export const SizeComparisonTertiary: Story = {
-  render: () => (
-    <HStack hAlign="center" gap={theme.padding.md}>
-      <SlimButton size="sm" hierarchy="tertiary">
-        <CrossIcon />
-      </SlimButton>
-      <SlimButton size="md" hierarchy="tertiary">
-        <CrossIcon />
-      </SlimButton>
-      <SlimButton size="lg" hierarchy="tertiary">
-        <CrossIcon />
-      </SlimButton>
-    </HStack>
-  ),
-};

package/src/actions/button/slim_button/slim_button.module.css

@@ -1,9 +0,0 @@
-@layer tcn-system {
-  :where(.slim-button) {
-    min-height: auto;
-  }
-
-  :where(.slim-button[data-is-disabled="true"]) {
-    pointer-events: none;
-  }
-}

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Button, ButtonProps } from '../button/button.js';
-import { clsx } from 'clsx';
-// Styles
-import styles from './slim_button.module.css';
-
-/**
- * @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/overlay/frame/frame.module.css

@@ -1,5 +0,0 @@
-@layer tcn-system {
-  :where(.frame-dialog) {
-    overflow: hidden;
-  }
-}

package/src/stacks/box/left_resize_handle.module.css

@@ -1,12 +0,0 @@
-@layer tcn-system {
-  :where(.left-resize-handle) {
-    position: fixed;
-    bottom: 0;
-    left: var(--resize-offset, -8px);
-    height: 100%;
-    width: 16px;
-    z-index: 1;
-    cursor: ew-resize;
-    pointer-events: auto;
-  }
-}

package/src/stacks/box/left_resize_handle.tsx

@@ -1,39 +0,0 @@
-import { clsx } from 'clsx';
-import styles from './left_resize_handle.module.css';
-import { createHorizontalResizeHandler } from './resize_handlers.js';
-import type { HorizontalResizeHandleProps } from './types.js';
-
-export type LeftResizeHandleProps = HorizontalResizeHandleProps;
-
-export function LeftResizeHandle({
-  targetRef,
-  handleProps,
-  onWidthResize,
-  onWidthResizeEnd,
-}: LeftResizeHandleProps) {
-  const resizeHandler = createHorizontalResizeHandler(
-    targetRef,
-    onWidthResize,
-    onWidthResizeEnd,
-    'left',
-    true,
-    true
-  );
-  const offset = handleProps?.offset ? handleProps.offset : -8;
-
-  const leftResizeHandleStyle: any = {
-    ...handleProps?.style,
-    '--resize-offset': `${offset}px`,
-    width: handleProps?.size || '16px',
-  };
-
-  return (
-    <div
-      className={clsx(styles['left-resize-handle'], 'tcn-left-resize-handle')}
-      onMouseDown={resizeHandler}
-      style={leftResizeHandleStyle}
-    >
-      {handleProps?.children}
-    </div>
-  );
-}

package/src/stacks/box/right_resize_handle.module.css

@@ -1,12 +0,0 @@
-@layer tcn-system {
-  :where(.right-resize-handle) {
-    position: fixed;
-    bottom: 0;
-    right: var(--resize-offset, -8px);
-    height: 100%;
-    width: 16px;
-    z-index: 1;
-    cursor: ew-resize;
-    pointer-events: auto;
-  }
-}

package/src/stacks/box/right_resize_handle.tsx

@@ -1,38 +0,0 @@
-import { clsx } from 'clsx';
-import { createHorizontalResizeHandler } from './resize_handlers.js';
-import styles from './right_resize_handle.module.css';
-import type { HorizontalResizeHandleProps } from './types.js';
-
-export type RightResizeHandleProps = HorizontalResizeHandleProps;
-export function RightResizeHandle({
-  targetRef,
-  handleProps,
-  onWidthResize,
-  onWidthResizeEnd,
-}: RightResizeHandleProps) {
-  const resizeHandler = createHorizontalResizeHandler(
-    targetRef,
-    onWidthResize,
-    onWidthResizeEnd,
-    'right',
-    false,
-    true
-  );
-  const offset = handleProps?.offset ? handleProps.offset : -8;
-
-  const rightResizeHandleStyle: any = {
-    ...handleProps?.style,
-    '--resize-offset': `${offset}px`,
-    width: handleProps?.size || '16px',
-  };
-
-  return (
-    <div
-      className={clsx(styles['right-resize-handle'], 'tcn-right-resize-handle')}
-      onMouseDown={resizeHandler}
-      style={rightResizeHandleStyle}
-    >
-      {handleProps?.children}
-    </div>
-  );
-}