@tcn/ui 0.3.0 → 0.3.2

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

@@ -4,6 +4,11 @@ import { Spacer } from '../../../stacks/spacer.js';
 import React from 'react';
 import { Button } from '../button/button.js';
 import { ButtonGroup } from '../button_group/button_group.js';
+import { SlimButton } from '../slim_button/slim_button.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { VStack } from '../../../stacks/v_stack.js';
 
 export default {
   title: 'Actions/Button Group',
@@ -104,3 +109,61 @@ export function PrimaryCustomColor() {
     </ButtonGroup>
   );
 }
+
+export function SlimButtonGroup() {
+  return (
+    <VStack gap="12px">
+      <ButtonGroup hierarchy="tertiary">
+        <SlimButton>
+          <CrossIcon />
+        </SlimButton>
+        <SlimButton>
+          <SearchIcon />
+        </SlimButton>
+        <SlimButton>
+          <PlusIcon />
+        </SlimButton>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <SlimButton>
+          <CrossIcon />
+        </SlimButton>
+        <SlimButton>
+          <SearchIcon />
+        </SlimButton>
+        <SlimButton>
+          <PlusIcon />
+        </SlimButton>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <SlimButton>
+          <CrossIcon />
+        </SlimButton>
+        <SlimButton>
+          <SearchIcon />
+        </SlimButton>
+        <SlimButton>
+          <PlusIcon />
+        </SlimButton>
+      </ButtonGroup>
+    </VStack>
+  );
+}
+
+export function MixedTesting() {
+  return (
+    <ButtonGroup hierarchy="primary">
+      <SlimButton>
+        <SearchIcon />
+      </SlimButton>
+      <SlimButton>
+        <PlusIcon />
+      </SlimButton>
+      <Button>
+        Third
+        <Spacer width="4px" />
+        <LockTwoIcon />
+      </Button>
+    </ButtonGroup>
+  );
+}

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

@@ -4,6 +4,9 @@ import { Spacer } from '../../../stacks/spacer.js';
 import React, { useState } from 'react';
 import { SelectGroup } from '../select_group/select_group.js';
 import { SingleSelectGroup } from '../select_group/single_select_group.js';
+import { TextBoldIcon } from '@tcn/icons/text_bold_icon.js';
+import { TextItalicIcon } from '@tcn/icons/text_italic_icon.js';
+import { TextUnderlineIcon } from '@tcn/icons/text_underline_icon.js';
 
 export default {
   title: 'Actions/Select Group',
@@ -17,14 +20,36 @@ export default {
   },
 };
 
-function useSBSelectGroupState() {
-  const [value, setValue] = useState<string[]>([]);
+function useSBSelectGroupState(initialValue: string[] = []) {
+  const [value, setValue] = useState<string[]>(initialValue);
   const handleChange = (newValue: string[]) => {
     setValue(newValue);
   };
   return { value, setValue, handleChange };
 }
 
+export function Baseline() {
+  const { value, handleChange } = useSBSelectGroupState();
+
+  return (
+    <SelectGroup value={value} onChange={handleChange}>
+      <option value="1" title="First">
+        First
+      </option>
+      <option value="2" title="Second">
+        Second
+      </option>
+      <option value="3" title="Third">
+        <HStack inline width="auto">
+          Third
+          <Spacer width="4px" />
+          <LockTwoIcon />
+        </HStack>
+      </option>
+    </SelectGroup>
+  );
+}
+
 export function FullyDisabled() {
   const { value, handleChange } = useSBSelectGroupState();
 
@@ -70,7 +95,7 @@ export function Multiselect() {
 }
 
 export function Disabled() {
-  const { value, handleChange } = useSBSelectGroupState();
+  const { value, handleChange } = useSBSelectGroupState(['3']);
 
   return (
     <SelectGroup value={value} onChange={handleChange}>
@@ -80,7 +105,7 @@ export function Disabled() {
       <option value="2" disabled title="Second">
         Second
       </option>
-      <option value="3" title="Third">
+      <option value="3" title="Third" disabled>
         <HStack inline width="auto">
           Third
           <Spacer width="4px" />
@@ -154,3 +179,21 @@ export function SingleSelectDisabled() {
     </SingleSelectGroup>
   );
 }
+
+export function SelectUtilityGroup() {
+  const { value, handleChange } = useSBSelectGroupState();
+
+  return (
+    <SelectGroup value={value} onChange={handleChange}>
+      <option value="bold" title="Bold">
+        <TextBoldIcon />
+      </option>
+      <option value="italic" title="Italic">
+        <TextItalicIcon />
+      </option>
+      <option value="underline" title="Underline">
+        <TextUnderlineIcon />
+      </option>
+    </SelectGroup>
+  );
+}

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

@@ -1,15 +1,17 @@
-.base-button {
-  width: auto;
-  height: auto;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  color: var(--button-text-color, #fff);
-  background-color: var(--button-color, var(--accent-color, #ccc));
-}
+@layer tcn-system {
+  :where(.base-button) {
+    width: auto;
+    height: auto;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    color: var(--tcn-button-text-color, #fff);
+    background-color: var(--tcn-button-color, var(--accent-color, #ccc));
+  }
 
-.base-button[data-width="default"] {
-  width: auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
+  :where(.base-button[data-width="default"]) {
+    width: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
 }

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

@@ -5,11 +5,13 @@ 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;
 }
 
 export type BaseButtonWithStackProps = BaseButtonOwnProps &
@@ -27,6 +29,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       style,
       color,
       hierarchy = 'secondary',
+      severity = 'neutral',
       size = 'md',
       onTouchStart,
       onContextMenu,
@@ -55,7 +58,8 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
     };
 
     if (color) {
-      finalStyle['--button-color'] = color;
+      finalStyle['--tcn-interactive-color'] = color;
+      finalStyle['--tcn-button-color'] = color;
     }
 
     return (
@@ -65,6 +69,7 @@ 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)}

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

@@ -1,51 +1,53 @@
-.button {
-  --button-height: calc(26px * var(--scalar, 1));
-  --button-color: var(--accent-color);
-  --button-color-hover: color-mix(in srgb, var(--button-color) 90%, black);
-  --button-color-active: color-mix(in srgb, var(--button-color) 75%, black);
-  --button-color-disabled: var(--status-disabled, #cccccc);
-
-  min-height: var(--button-height);
-  width: auto;
-  cursor: pointer;
-  font-size: calc(14px * var(--scalar, 1));
-  line-height: calc(16px * var(--scalar, 1));
-}
-
-/* Sizes */
-.button[data-size="sm"] {
-  --button-height: calc(22px * var(--scalar, 1));
-}
-
-.button[data-size="md"] {
-  --button-height: calc(26px * var(--scalar, 1));
-}
-
-.button[data-size="lg"] {
-  --button-height: calc(32px * var(--scalar, 1));
-}
-
-/* Button Text Sizes */
-.button[data-size="sm"] .button-text {
-  font-size: calc(12px * var(--scalar, 1));
-}
-
-.button[data-size="md"] .button-text {
-  font-size: calc(14px * var(--scalar, 1));
-}
-
-.button[data-size="lg"] .button-text {
-  font-size: calc(16px * var(--scalar, 1));
-}
-
-.button[data-size="sm"] {
-  font-size: calc(12px * var(--scalar, 1));
-}
-
-.button[data-size="md"] {
-  font-size: calc(14px * var(--scalar, 1));
-}
-
-.button[data-size="lg"] {
-  font-size: calc(16px * var(--scalar, 1));
+@layer tcn-system {
+  :where(.button) {
+    --button-height: calc(26px * var(--scalar, 1));
+    --button-color: var(--accent-color);
+    --button-color-hover: color-mix(in srgb, var(--button-color) 90%, black);
+    --button-color-active: color-mix(in srgb, var(--button-color) 75%, black);
+    --button-color-disabled: var(--status-disabled, #cccccc);
+
+    min-height: var(--button-height);
+    width: auto;
+    cursor: pointer;
+    font-size: calc(14px * var(--scalar, 1));
+    line-height: calc(16px * var(--scalar, 1));
+  }
+
+  /* Sizes */
+  :where(.button[data-size="sm"]) {
+    --button-height: calc(22px * var(--scalar, 1));
+  }
+
+  :where(.button[data-size="md"]) {
+    --button-height: calc(26px * var(--scalar, 1));
+  }
+
+  :where(.button[data-size="lg"]) {
+    --button-height: calc(32px * var(--scalar, 1));
+  }
+
+  /* Button Text Sizes */
+  :where(.button[data-size="sm"] .button-text) {
+    font-size: calc(12px * var(--scalar, 1));
+  }
+
+  :where(.button[data-size="md"] .button-text) {
+    font-size: calc(14px * var(--scalar, 1));
+  }
+
+  :where(.button[data-size="lg"] .button-text) {
+    font-size: calc(16px * var(--scalar, 1));
+  }
+
+  :where(.button[data-size="sm"]) {
+    font-size: calc(12px * var(--scalar, 1));
+  }
+
+  :where(.button[data-size="md"]) {
+    font-size: calc(14px * var(--scalar, 1));
+  }
+
+  :where(.button[data-size="lg"]) {
+    font-size: calc(16px * var(--scalar, 1));
+  }
 }

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

@@ -1,67 +1,69 @@
-:where(.button-group) {
-  --button-background: var(--surface-color, transparent);
-  border-radius: 4px;
-}
+@layer tcn-system {
+  :where(.button-group) {
+    --button-background: var(--surface-color, transparent);
+    border-radius: 4px;
+  }
 
-:where(.button-group-button) {
-  background-color: var(--button-background);
-  z-index: 1;
-}
+  :where(.button-group-button) {
+    background-color: var(--button-background);
+    z-index: 1;
+  }
 
-:where(.button-group-divider) {
-  display: none;
-}
+  :where(.button-group-divider) {
+    display: none;
+  }
 
-.button-group-button:not(:first-child) {
-  margin-left: -1px;
-}
+  :where(.button-group-button:not(:first-child)) {
+    margin-left: -1px;
+  }
 
-.button-group-button:is(:focus, :focus-visible, :hover, :active) {
-  z-index: 2;
-}
+  :where(.button-group-button:is(:focus, :focus-visible, :hover, :active)) {
+    z-index: 2;
+  }
 
-.button-group-button:not(:first-child),
-.button-group-button:not(:last-child) {
-  border-radius: 0px;
-}
+  :where(.button-group-button:not(:first-child)),
+  :where(.button-group-button:not(:last-child)) {
+    border-radius: 0px;
+  }
 
-.button-group-button:last-child {
-  border-end-end-radius: 4px;
-  border-start-end-radius: 4px;
-}
+  :where(.button-group-button:last-child) {
+    border-end-end-radius: 4px;
+    border-start-end-radius: 4px;
+  }
 
-.button-group-button:first-child {
-  border-start-start-radius: 4px;
-  border-end-start-radius: 4px;
-}
+  :where(.button-group-button:first-child) {
+    border-start-start-radius: 4px;
+    border-end-start-radius: 4px;
+  }
 
-.button-group-button:last-child {
-  border-inline-start-width: 0;
-}
+  :where(.button-group-button:last-child) {
+    border-inline-start-width: 0;
+  }
 
-.button-group-button:first-child {
-  border-inline-end-width: 0;
-}
+  :where(.button-group-button:first-child) {
+    border-inline-end-width: 0;
+  }
 
-.button-group-button:only-child {
-  border-inline-end-width: 1px;
-  border-inline-start-width: 1px;
-}
+  :where(.button-group-button:only-child) {
+    border-inline-end-width: 1px;
+    border-inline-start-width: 1px;
+  }
 
-/* Sizes */
-:where(.button-group[data-size="sm"]) {
-  --button-height: calc(22px * var(--scalar, 1));
-}
+  /* Sizes */
+  :where(.button-group[data-size="sm"]) {
+    --button-height: calc(22px * var(--scalar, 1));
+  }
 
-:where(.button-group[data-size="md"]) {
-  --button-height: calc(26px * var(--scalar, 1));
-}
+  :where(.button-group[data-size="md"]) {
+    --button-height: calc(26px * var(--scalar, 1));
+  }
 
-:where(.button-group[data-size="lg"]) {
-  --button-height: calc(32px * var(--scalar, 1));
-}
+  :where(.button-group[data-size="lg"]) {
+    --button-height: calc(32px * var(--scalar, 1));
+  }
 
-/* Disabled */
-:where(.button-group-button[data-is-disabled="true"]) {
-  z-index: 0;
+  /* Disabled */
+  :where(.button-group-button[data-is-disabled="true"]) {
+    z-index: 0;
+  }
 }

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

@@ -9,7 +9,9 @@ import styles from './button_group.module.css';
 export interface ButtonGroupOwnProps {
   hierarchy?: Hierarchy;
   size?: Size;
-  children: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];
+  children:
+    | React.ReactElement<Omit<ButtonProps, 'hierarchy'>>
+    | React.ReactElement<Omit<ButtonProps, 'hierarchy'>>[];
 }
 
 export type ButtonGroupProps = WithDetailedHTMLProps<ButtonGroupOwnProps, 'div'>;
@@ -32,7 +34,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         height="auto"
         data-hierarchy={hierarchy}
         data-size={size}
-        className={clsx(styles['button-group'], 'button-group', className)}
+        className={clsx(styles['button-group'], 'tcn-button-group', className)}
         {...props}
       >
         {buttons.map((button, i) => {
@@ -44,7 +46,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
                 {...button.props}
                 className={clsx(
                   styles['button-group-button'],
-                  'button-group-button',
+                  'tcn-button-group-button',
                   button.props.className
                 )}
                 hierarchy={hierarchy}
@@ -52,7 +54,10 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
               />
               {!isLast && (
                 <div
-                  className={clsx(styles['button-group-divider'], 'button-group-divider')}
+                  className={clsx(
+                    styles['button-group-divider'],
+                    'tcn-button-group-divider'
+                  )}
                   data-hierarchy={hierarchy}
                   data-size={size}
                 />

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

@@ -1,67 +1,69 @@
-.select-group {
-  --button-background: var(--surface-color, transparent);
-  border-radius: 4px;
-}
+@layer tcn-system {
+  :where(.select-group) {
+    --button-background: var(--surface-color, transparent);
+    border-radius: 4px;
+  }
 
-.select-group-option {
-  background-color: var(--button-background);
-  z-index: 1;
-}
+  :where(.select-group-option) {
+    background-color: var(--button-background);
+    z-index: 1;
+  }
 
-.select-group-divider {
-  display: none;
-}
+  :where(.select-group-divider) {
+    display: none;
+  }
 
-.select-group-option:not(:first-child) {
-  margin-left: -1px;
-}
+  :where(.select-group-option:not(:first-child)) {
+    margin-left: -1px;
+  }
 
-.select-group-option:is(:focus, :focus-visible, :hover, :active) {
-  z-index: 2;
-}
+  :where(.select-group-option:is(:focus, :focus-visible, :hover, :active)) {
+    z-index: 2;
+  }
 
-.select-group-option:not(:first-child),
-.select-group-option:not(:last-child) {
-  border-radius: 0px;
-}
+  :where(.select-group-option:not(:first-child)),
+  :where(.select-group-option:not(:last-child)) {
+    border-radius: 0px;
+  }
 
-.select-group-option:last-child {
-  border-end-end-radius: 4px;
-  border-start-end-radius: 4px;
-}
+  :where(.select-group-option:last-child) {
+    border-end-end-radius: 4px;
+    border-start-end-radius: 4px;
+  }
 
-.select-group-option:first-child {
-  border-start-start-radius: 4px;
-  border-end-start-radius: 4px;
-}
+  :where(.select-group-option:first-child) {
+    border-start-start-radius: 4px;
+    border-end-start-radius: 4px;
+  }
 
-.select-group-option:last-child {
-  border-inline-start-width: 0;
-}
+  :where(.select-group-option:last-child) {
+    border-inline-start-width: 0;
+  }
 
-.select-group-option:first-child {
-  border-inline-end-width: 0;
-}
+  :where(.select-group-option:first-child) {
+    border-inline-end-width: 0;
+  }
 
-.select-group-option:only-child {
-  border-inline-end-width: 1px;
-  border-inline-start-width: 1px;
-}
+  :where(.select-group-option:only-child) {
+    border-inline-end-width: 1px;
+    border-inline-start-width: 1px;
+  }
 
-/* Sizes */
-.select-group[data-size="sm"] {
-  --button-height: calc(22px * var(--scalar, 1));
-}
+  /* Sizes */
+  :where(.select-group[data-size="sm"]) {
+    --button-height: calc(22px * var(--scalar, 1));
+  }
 
-.select-group[data-size="md"] {
-  --button-height: calc(26px * var(--scalar, 1));
-}
+  :where(.select-group[data-size="md"]) {
+    --button-height: calc(26px * var(--scalar, 1));
+  }
 
-.select-group[data-size="lg"] {
-  --button-height: calc(32px * var(--scalar, 1));
-}
+  :where(.select-group[data-size="lg"]) {
+    --button-height: calc(32px * var(--scalar, 1));
+  }
 
-/* Disabled */
-.select-group-option[data-is-disabled="true"] {
-  z-index: 0;
+  /* Disabled */
+  :where(.select-group-option[data-is-disabled="true"]) {
+    z-index: 0;
+  }
 }

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

@@ -49,7 +49,7 @@ export const SelectGroup = React.forwardRef(function ButtonGroup(
       width="auto"
       height="auto"
       data-is-disabled={disabled}
-      className={clsx(styles['select-group'], 'select-group', className)}
+      className={clsx(styles['select-group'], 'tcn-select-group', className)}
       {...props}
     >
       {options.map((option, i) => {
@@ -63,7 +63,7 @@ export const SelectGroup = React.forwardRef(function ButtonGroup(
             <Button
               disabled={disabled || option.props.disabled}
               data-is-disabled={disabled || option.props.disabled}
-              className={clsx(styles['select-group-option'], 'select-group-option')}
+              className={clsx(styles['select-group-option'], 'tcn-select-group-option')}
               hierarchy={isSelected ? 'primary' : 'secondary'}
               onClick={select}
               value={option.props.value}

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

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

package/src/actions/types.ts

@@ -0,0 +1,6 @@
+export type ActionSeverity =
+  | 'dangerous'
+  | 'cautious'
+  | 'neutral'
+  | 'suggested'
+  | 'encouraged';

package/src/css/layers.css

@@ -0,0 +1 @@
+@layer tcn-reset, tcn-system, tcn-theme;