@tcn/ui 0.0.1

package/src/surfaces/window/window.stories.tsx

@@ -0,0 +1,15 @@
+import { Window } from './window.js';
+
+export default {
+  title: 'Frame / Window',
+  component: Window,
+  tags: ['autodocs'],
+};
+
+export const ModalStory = () => {
+  return (
+    <Window>
+      <>window</>
+    </Window>
+  );
+};

package/src/surfaces/window/window.tsx

@@ -0,0 +1,21 @@
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './window.module.css';
+
+export type WindowProps = Omit<VStackProps, 'as'>;
+
+export const Window = React.forwardRef<HTMLDivElement, WindowProps>(function Window(
+  { children, className, ...props }: WindowProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      className={classNames(styles.window, className, 'window')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/themes/index.ts

@@ -0,0 +1,5 @@
+export * from './theme_variables.js';
+export * from './theme.js';
+export * from './themes/windows_98/windows_98_theme.js';
+export * from './themes/ergo/ergo_theme.js';
+export * from './stylesheets/reset.js';

package/src/themes/stories/button_showcase.tsx

@@ -0,0 +1,153 @@
+import { useState } from 'react';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { PhoneIcon } from '@tcn/icons/phone_icon.js';
+import { BluetoothIcon } from '@tcn/icons/bluetooth_icon.js';
+import {
+  Button,
+  ButtonGroup,
+  SelectGroup,
+  SingleSelectGroup,
+  SlimButton,
+} from '../../actions/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { Field } from '../../form/field/field.js';
+import { FieldSet } from '../../form/field_set/field_set.js';
+import { BodyText } from '../../typography/index.js';
+
+export function ButtonShowcase() {
+  const [singleSelectedOptions, setSingleSelectedOptions] = useState<string>('option1');
+  const [multiselectOptions, setMultiselectOptions] = useState<string[]>([
+    'option1',
+    'option2',
+  ]);
+
+  return (
+    <FieldSet legend="Button Showcase">
+      {/* Basic Buttons */}
+      <Field label="Basic Buttons">
+        <HStack width="400px" gap="8px">
+          <Button hierarchy="primary">Primary</Button>
+          <Spacer />
+          <Button hierarchy="secondary">Secondary</Button>
+          <Spacer />
+          <Button hierarchy="tertiary">Tertiary</Button>
+        </HStack>
+      </Field>
+
+      {/* Button Groups */}
+      <Field label="Button Groups">
+        <VStack width="400px" gap="20px" hAlign="center">
+          <ButtonGroup hierarchy="primary">
+            <Button>Option 1</Button>
+            <Button>Option 2</Button>
+            <Button>Option 3</Button>
+          </ButtonGroup>
+          <ButtonGroup hierarchy="secondary">
+            <Button>Option 1</Button>
+            <Button>Option 2</Button>
+            <Button>Option 3</Button>
+          </ButtonGroup>
+          <ButtonGroup hierarchy="tertiary">
+            <Button>Option 1</Button>
+            <Button>Option 2</Button>
+            <Button>Option 3</Button>
+          </ButtonGroup>
+        </VStack>
+      </Field>
+
+      {/* Select Groups */}
+      <Field label="Select Groups">
+        <VStack width="400px" gap="20px" hAlign="center">
+          <SingleSelectGroup
+            value={singleSelectedOptions}
+            onChange={setSingleSelectedOptions}
+          >
+            <option value="option1">Option 1</option>
+            <option value="option2">Option 2</option>
+            <option value="option3">Option 3</option>
+          </SingleSelectGroup>
+          <SelectGroup value={multiselectOptions} onChange={setMultiselectOptions}>
+            <option value="option1">Option 1</option>
+            <option value="option2">Option 2</option>
+            <option value="option3">Option 3</option>
+          </SelectGroup>
+        </VStack>
+      </Field>
+
+      {/* Slim Buttons */}
+      <Field label="Slim Buttons">
+        <VStack width="400px" gap="20px" hAlign="center">
+          <HStack gap="8px" hAlign="center">
+            <SlimButton size="sm" hierarchy="primary">
+              <CrossIcon size="sm" />
+            </SlimButton>
+            <SlimButton size="md" hierarchy="primary">
+              <CrossIcon size="md" />
+            </SlimButton>
+            <SlimButton size="lg" hierarchy="primary">
+              <CrossIcon size="lg" />
+            </SlimButton>
+          </HStack>
+          <HStack gap="8px" hAlign="center">
+            <SlimButton size="sm" hierarchy="secondary">
+              <PhoneIcon size="sm" />
+            </SlimButton>
+            <SlimButton size="md" hierarchy="secondary">
+              <PhoneIcon size="md" />
+            </SlimButton>
+            <SlimButton size="lg" hierarchy="secondary">
+              <PhoneIcon size="lg" />
+            </SlimButton>
+          </HStack>
+          <HStack gap="8px" hAlign="center">
+            <SlimButton size="sm" hierarchy="tertiary">
+              <BluetoothIcon size="sm" />
+            </SlimButton>
+            <SlimButton size="md" hierarchy="tertiary">
+              <BluetoothIcon size="md" />
+            </SlimButton>
+            <SlimButton size="lg" hierarchy="tertiary">
+              <BluetoothIcon size="lg" />
+            </SlimButton>
+          </HStack>
+        </VStack>
+      </Field>
+
+      {/* Disabled States */}
+      <Field label="Disabled States">
+        <HStack width="400px" gap="8px">
+          <Button hierarchy="primary" disabled>
+            Primary Disabled
+          </Button>
+          <Spacer />
+          <Button hierarchy="secondary" disabled>
+            Secondary Disabled
+          </Button>
+          <Spacer />
+          <Button hierarchy="tertiary" disabled>
+            Tertiary Disabled
+          </Button>
+        </HStack>
+      </Field>
+
+      {/* Button with Icons */}
+      <Field label="Buttons with Icons">
+        <HStack width="400px" gap="8px">
+          <Button hierarchy="primary">
+            <PhoneIcon size="sm" />
+            <Spacer width="8px" />
+            <BodyText>Call</BodyText>
+          </Button>
+          <Spacer />
+          <Button hierarchy="secondary">
+            <BluetoothIcon size="sm" />
+            <Spacer width="8px" />
+            <BodyText>Connect</BodyText>
+          </Button>
+        </HStack>
+      </Field>
+    </FieldSet>
+  );
+}

package/src/themes/stories/controls_fieldset.tsx

@@ -0,0 +1,249 @@
+import { useState } from 'react';
+import {
+  Select,
+  Option,
+  Input,
+  Textarea,
+  MaskInput,
+  DatePickerInput,
+  ComboBox,
+  MultiComboBox,
+  PhoneNumberInput,
+  Checkbox,
+  ColorInput,
+  Multiselect,
+  Radio,
+  Slider,
+  Switch,
+  UnitInput,
+} from '../../inputs/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { Field } from '../../form/field/field.js';
+import { FieldSet } from '../../form/field_set/field_set.js';
+
+export function ControlsFieldSet() {
+  const [disabled, setDisabled] = useState<boolean>(false);
+  const [comboBoxValue, setComboBoxValue] = useState<string>('Option 1');
+  const [multiComboBoxValue, setMultiComboBoxValue] = useState<string[]>(['Option 1']);
+  const [datePickerValue, setDatePickerValue] = useState<Date | null>(null);
+  const [datePickerValueWithTime, setDatePickerValueWithTime] = useState<Date | null>(
+    null
+  );
+  const [phoneNumberValue, setPhoneNumberValue] = useState<string>('');
+
+  // Additional input state
+  const [checkboxValue, setCheckboxValue] = useState<boolean>(false);
+  const [colorInputValue, setColorInputValue] = useState<string>('#000000');
+  const [multiselectValue, setMultiselectValue] = useState<string[]>([]);
+  const [radioValue, setRadioValue] = useState<string>('option1');
+  const [sliderValue, setSliderValue] = useState<string>('50');
+  const [switchValue, setSwitchValue] = useState<boolean>(false);
+  const [unitInputValue, setUnitInputValue] = useState<number | null>(100);
+  const [unitInputUnit, setUnitInputUnit] = useState<string>('px');
+  const [selectValue, setSelectValue] = useState<string>('option1');
+
+  return (
+    <>
+      <Field label="Disable Inputs">
+        <Switch checked={disabled} onChange={setDisabled} />
+      </Field>
+      <Spacer height="8px" />
+      <FieldSet legend="Inputs">
+        <Field label="Input">
+          <Input disabled={disabled} />
+        </Field>
+        <Field label="Textarea">
+          <Textarea disabled={disabled} />
+        </Field>
+        <Field label="ComboBox">
+          <ComboBox
+            value={comboBoxValue}
+            onChange={setComboBoxValue}
+            onOptionSelect={setComboBoxValue}
+            disabled={disabled}
+          >
+            <Option value="Option 1" label="Option 1">
+              Option 1
+            </Option>
+            <Option value="Option 2" label="Option 2">
+              Option 2
+            </Option>
+            <Option value="Option 3" label="Option 3">
+              Option 3
+            </Option>
+          </ComboBox>
+        </Field>
+        <Field label="Multi Combo Box">
+          <MultiComboBox
+            value={multiComboBoxValue}
+            onChange={setMultiComboBoxValue}
+            disabled={disabled}
+          >
+            <Option value="Option 1" label="Option 1">
+              Option 1
+            </Option>
+            <Option value="Option 2" label="Option 2">
+              Option 2
+            </Option>
+            <Option value="option 3" label="Option 3">
+              Option 3
+            </Option>
+          </MultiComboBox>
+        </Field>
+        <Field label="Date Picker Input">
+          <DatePickerInput
+            value={datePickerValue}
+            onChange={setDatePickerValue}
+            disabled={disabled}
+          />
+        </Field>
+        <Field label="Date Picker Input (With Time)">
+          <DatePickerInput
+            value={datePickerValueWithTime}
+            onChange={setDatePickerValueWithTime}
+            showTime
+            disabled={disabled}
+          />
+        </Field>
+        <Field label="Mask Input">
+          <MaskInput mask={{ mask: '99/99/9999' }} disabled={disabled} />
+        </Field>
+        <Field label="Phone Number Input">
+          <PhoneNumberInput
+            value={phoneNumberValue}
+            onChange={setPhoneNumberValue}
+            disabled={disabled}
+          >
+            <Option value="+14355865953" label="John Doe" keywords={['john', 'doe']}>
+              John Doe - +1 (435) 586-5953
+            </Option>
+            <Option value="+14355865954" label="Jane Smith" keywords={['jane', 'smith']}>
+              Jane Smith - +1 (435) 586-5954
+            </Option>
+            <Option
+              value="+14355865955"
+              label="Bob Johnson"
+              keywords={['bob', 'johnson']}
+            >
+              Bob Johnson - +1 (435) 586-5955
+            </Option>
+          </PhoneNumberInput>
+        </Field>
+        <Field label="Select">
+          <Select value={selectValue} onChange={setSelectValue} disabled={disabled}>
+            <Option value="option1" label="Option 1">
+              Option 1
+            </Option>
+            <Option value="option2" label="Option 2">
+              Option 2
+            </Option>
+            <Option value="option3" label="Option 3">
+              Option 3
+            </Option>
+          </Select>
+        </Field>
+        <Field label="Checkbox">
+          <Checkbox
+            checked={checkboxValue}
+            onChange={setCheckboxValue}
+            disabled={disabled}
+          />
+        </Field>
+        <Field label="Color Input">
+          <ColorInput
+            value={colorInputValue}
+            onChange={setColorInputValue}
+            disabled={disabled}
+          />
+        </Field>
+        <Field label="Multiselect">
+          <Multiselect
+            disabled={disabled}
+            value={multiselectValue}
+            onChange={setMultiselectValue}
+          >
+            <Option value="option1" label="Option 1">
+              Option 1
+            </Option>
+            <Option value="option2" label="Option 2">
+              Option 2
+            </Option>
+            <Option value="option3" label="Option 3">
+              Option 3
+            </Option>
+          </Multiselect>
+        </Field>
+        <Field label="Radio">
+          <HStack gap="8px" hAlign="end">
+            <Radio
+              name="radio-group"
+              id="radio-option1"
+              value="option1"
+              checked={radioValue === 'option1'}
+              onChange={setRadioValue}
+              label="Option 1"
+              disabled={disabled}
+            />
+            <Radio
+              name="radio-group"
+              id="radio-option2"
+              value="option2"
+              checked={radioValue === 'option2'}
+              onChange={setRadioValue}
+              label="Option 2"
+              disabled={disabled}
+            />
+            <Radio
+              name="radio-group"
+              id="radio-option3"
+              value="option3"
+              checked={radioValue === 'option3'}
+              onChange={setRadioValue}
+              label="Option 3"
+              disabled={disabled}
+            />
+          </HStack>
+        </Field>
+        <Field label="Slider" vAlign="center">
+          <Slider
+            value={sliderValue}
+            onChange={setSliderValue}
+            min={0}
+            max={100}
+            disabled={disabled}
+          />
+        </Field>
+        <Field label="Switch">
+          <HStack inline width="auto" gap="8px">
+            <Switch disabled={disabled} checked={switchValue} onChange={setSwitchValue} />
+          </HStack>
+        </Field>
+        <Field label="Unit Input">
+          <UnitInput
+            value={unitInputValue}
+            unit={unitInputUnit}
+            onChange={(value, unit) => {
+              setUnitInputValue(value);
+              setUnitInputUnit(unit);
+            }}
+            disabled={disabled}
+          >
+            <Option value="px" label="px">
+              px
+            </Option>
+            <Option value="em" label="em">
+              em
+            </Option>
+            <Option value="rem" label="rem">
+              rem
+            </Option>
+            <Option value="%" label="%">
+              %
+            </Option>
+          </UnitInput>
+        </Field>
+      </FieldSet>
+    </>
+  );
+}