@tcn/ui 0.12.3 → 0.12.4

package/src/layouts/group/group.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Box, type BoxProps } from '../../stacks/index.js';
+
+import styles from './group.module.css';
+
+export type GroupProps = BoxProps;
+
+export const Group = React.forwardRef<HTMLElement, GroupProps>(function Group(
+  { children, className, as = 'span', ...props }: GroupProps,
+  ref
+) {
+  return (
+    <Box
+      ref={ref}
+      as={as}
+      className={clsx(className, styles['group'], 'tcn-group')}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+});

package/src/layouts/index.ts

@@ -12,6 +12,8 @@ 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 { Group, type GroupProps } from './group/group.js';
+export { Bar, type BarProps } from './bar/bar.js';
 export { Row } from './row/row.js';
 export { Section } from './section/section.js';
 export { Heading, type HeadingOwnProps } from './section/heading.js';

package/src/overlay/popper/__stories__/element_popper.stories.tsx

@@ -35,7 +35,7 @@ const meta: Meta<typeof ElementPopperComponent> = {
 
 export default meta;
 
-export function ElementPopper(props: ElementPopoverStoryProps) {
+export function SBElementPopper(props: ElementPopoverStoryProps) {
   const [isOpen, setIsOpen] = useState(false);
   const anchorElement = useRef<HTMLButtonElement>(null);
 

package/src/surfaces/alert/alert.tsx

@@ -6,8 +6,6 @@ import { Confirm, ConfirmProps } from '../confirm/confirm.js';
 export interface AlertProps extends Omit<ConfirmProps, 'actions'> {
   open?: boolean;
   graphic?: React.ReactNode;
-  title?: string;
-  description?: string;
   onAccept?: () => void;
 }
 

package/src/surfaces/confirm/confirm.tsx

@@ -8,11 +8,12 @@ import { BodyText, Title } from '../../typography/index.js';
 import styles from './confirm.module.css';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
 
-export interface ConfirmProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ConfirmProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   open?: boolean;
   graphic?: React.ReactNode;
-  title?: string;
-  description?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
   actions?: React.ReactNode;
   veilProps?: BoxProps;
 }
@@ -54,6 +55,24 @@ export const Confirm = React.forwardRef(function Confirm(
     setShake(true);
   }
 
+  const descriptionElement =
+    typeof description === 'string' ? (
+      <BodyText className="tcn-confirm-description" hierarchy="tertiary">
+        {description}
+      </BodyText>
+    ) : (
+      description
+    );
+
+  const titleElement =
+    typeof title === 'string' ? (
+      <Title className="tcn-confirm-title" emphasis="strong" size="sm">
+        {title}
+      </Title>
+    ) : (
+      title
+    );
+
   return (
     <>
       {open && (
@@ -68,12 +87,8 @@ export const Confirm = React.forwardRef(function Confirm(
             >
               <VStack hAlign="center">
                 {graphic}
-                <Title className="tcn-confirm-title" emphasis="strong" size="sm">
-                  {title}
-                </Title>
-                <BodyText className="tcn-confirm-description" hierarchy="tertiary">
-                  {description}
-                </BodyText>
+                {titleElement}
+                {descriptionElement}
                 <Spacer height="16px" />
                 <Box
                   className={clsx(styles.actions, 'tcn-confirm-actions')}

package/src/themes/stories/button_showcase.tsx

@@ -1,14 +1,7 @@
-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 { Button, ButtonGroup } from '../../actions/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
@@ -17,12 +10,6 @@ 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 */}
@@ -57,60 +44,41 @@ export function ButtonShowcase() {
         </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">
+            <Button utility size="sm" hierarchy="primary">
               <CrossIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="primary">
+            </Button>
+            <Button utility size="md" hierarchy="primary">
               <CrossIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="primary">
+            </Button>
+            <Button utility size="lg" hierarchy="primary">
               <CrossIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="secondary">
+            <Button utility size="sm" hierarchy="secondary">
               <PhoneIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="secondary">
+            </Button>
+            <Button utility size="md" hierarchy="secondary">
               <PhoneIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="secondary">
+            </Button>
+            <Button utility size="lg" hierarchy="secondary">
               <PhoneIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="tertiary">
+            <Button utility size="sm" hierarchy="tertiary">
               <BluetoothIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="tertiary">
+            </Button>
+            <Button utility size="md" hierarchy="tertiary">
               <BluetoothIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="tertiary">
+            </Button>
+            <Button utility size="lg" hierarchy="tertiary">
               <BluetoothIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
         </VStack>
       </Field>

package/src/themes/stylesheets/reset.css

@@ -91,17 +91,17 @@
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
+  /* FIXME: sometimes reset breaks stacks display value (flex) */
+  /* header, section */
   article,
   aside,
   details,
   figcaption,
   figure,
   footer,
-  header,
   hgroup,
   menu,
-  nav,
-  section {
+  nav {
     display: block;
   }
   body {

package/src/themes/themes/ergo/ergo_theme.css

@@ -48,6 +48,7 @@
     --font-size: 12px;
 
     /* Spacing */
+    --gap-xs: 2px;
     --gap-small: 4px;
     --gap-medium: 8px;
     --gap-large: 16px;
@@ -563,17 +564,21 @@
 
   /* Inline  */
   .tcn-tabs-bar[data-variant="inline"] {
+    font-size: 12px;
     min-width: min-content;
     width: auto;
     flex-grow: 0;
     border-radius: var(--shape-radius-medium);
     border: 1px solid var(--on-material);
+    padding-block: 1px;
+    padding-inline: 2px;
 
     .tcn-tabs-list {
-      gap: var(--gap-small);
-      padding: var(--padding-small);
+      height: 20px;
+      gap: var(--gap-xs);
       .tcn-tab-item {
         border-radius: var(--shape-radius-medium);
+        min-height: 20px;
       }
     }
   }
@@ -712,6 +717,9 @@
   }
 
   .tcn-rail {
+    :where(.tcn-rail-stack) {
+      gap: var(--gap-medium);
+    }
     :where(.tcn-body) {
       gap: var(--gap-medium);
     }
@@ -856,9 +864,25 @@
     background-color: var(--background-color-primary);
   }
 
+  .tcn-bar {
+    gap: var(--gap-medium);
+
+    /* Add a divider between groups unless there is a spacer after a group */
+    :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {
+      content: "";
+      display: block;
+      min-width: 2px;
+      height: 18px;
+      background: var(--ergo-grey);
+      border-radius: var(--shape-radius-small);
+      align-self: center;
+    }
+  }
+
   /* PANEL */
   .tcn-panel {
-    background-color: var(--background-color-primary);
+    --material: var(--background-color-primary);
+    background-color: var(--material);
     border-radius: var(--shape-radius-medium);
     overflow: hidden;
   }
@@ -1279,7 +1303,9 @@
   .tcn-switch-wrapper,
   .tcn-date-picker,
   .tcn-date-picker-year-selector,
-  .tcn-radio {
+  .tcn-radio,
+  .tcn-suggestion-list-search-input,
+  .tcn-suggestion-list {
     --accent-color: var(--ergo-primary);
   }
 }

package/dist/actions/button/select_group/select_group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"select_group.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/select_group/select_group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AACnE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,CAAC,mBAAmB,EAAE,KAAK,CAAC,EACjD,UAAU,CACX,GAAG;IACF,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GACrC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,WAAW,sGAsDtB,CAAC"}

package/dist/actions/button/select_group/select_group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select_group.js","sources":["../../../../src/actions/button/select_group/select_group.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../button/button.js';\nimport styles from './select_group.module.css';\n\nexport type SelectGroupChangeCallback = (values: string[]) => void;\nexport interface SelectGroupOwnProps {\n  value: string[];\n  disabled?: boolean;\n}\n\nexport type SelectGroupProps = Omit<\n  WithDetailedHTMLProps<SelectGroupOwnProps, 'div'>,\n  'onChange'\n> & {\n  onChange?: SelectGroupChangeCallback;\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n};\n\nexport const SelectGroup = React.forwardRef(function ButtonGroup(\n  { children, value, className, onChange, disabled = false, ...props }: SelectGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const options: React.ReactElement<any>[] = Array.isArray(children)\n    ? children\n    : [children];\n\n  const handleChange = (option: string, isSelected: boolean) => {\n    if (disabled) return;\n    const next = [...value];\n    if (isSelected) {\n      const index = value.indexOf(option);\n      index > -1 && next.splice(index, 1);\n    } else {\n      next.push(option);\n    }\n    onChange?.(next);\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      data-is-disabled={disabled}\n      className={clsx(styles['select-group'], 'tcn-select-group', className)}\n      {...props}\n    >\n      {options.map((option, i) => {\n        const isSelected = value.includes(option.props.value);\n        const select = () => {\n          handleChange(option.props.value, isSelected);\n        };\n\n        return (\n          <React.Fragment key={i}>\n            <Button\n              disabled={disabled || option.props.disabled}\n              data-is-disabled={disabled || option.props.disabled}\n              className={clsx(styles['select-group-option'], 'tcn-select-group-option')}\n              hierarchy={isSelected ? 'primary' : 'secondary'}\n              onClick={select}\n              value={option.props.value}\n            >\n              {option.props.children}\n            </Button>\n          </React.Fragment>\n        );\n      })}\n    </HStack>\n  );\n});\n"],"names":["SelectGroup","React","children","value","className","onChange","disabled","props","ref","options","handleChange","option","isSelected","next","index","jsx","HStack","clsx","styles","i","select","Button"],"mappings":";;;;;4LAuBaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,UAAAC,IAAW,IAAO,GAAGC,EAAA,GAC7DC,GACA;AACA,QAAMC,IAAqC,MAAM,QAAQP,CAAQ,IAC7DA,IACA,CAACA,CAAQ,GAEPQ,IAAe,CAACC,GAAgBC,MAAwB;AAC5D,QAAIN,EAAU;AACd,UAAMO,IAAO,CAAC,GAAGV,CAAK;AACtB,QAAIS,GAAY;AACd,YAAME,IAAQX,EAAM,QAAQQ,CAAM;AAClC,MAAAG,IAAQ,MAAMD,EAAK,OAAOC,GAAO,CAAC;AAAA,IACpC;AACE,MAAAD,EAAK,KAAKF,CAAM;AAElB,IAAAN,IAAWQ,CAAI;AAAA,EACjB;AAEA,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,oBAAkBF;AAAA,MAClB,WAAWW,EAAKC,EAAO,cAAc,GAAG,oBAAoBd,CAAS;AAAA,MACpE,GAAGG;AAAA,MAEH,UAAAE,EAAQ,IAAI,CAACE,GAAQQ,MAAM;AAC1B,cAAMP,IAAaT,EAAM,SAASQ,EAAO,MAAM,KAAK,GAC9CS,IAAS,MAAM;AACnB,UAAAV,EAAaC,EAAO,MAAM,OAAOC,CAAU;AAAA,QAC7C;AAEA,eACE,gBAAAG,EAACd,EAAM,UAAN,EACC,UAAA,gBAAAc;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,UAAUf,KAAYK,EAAO,MAAM;AAAA,YACnC,oBAAkBL,KAAYK,EAAO,MAAM;AAAA,YAC3C,WAAWM,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,YACxE,WAAWN,IAAa,YAAY;AAAA,YACpC,SAASQ;AAAA,YACT,OAAOT,EAAO,MAAM;AAAA,YAEnB,YAAO,MAAM;AAAA,UAAA;AAAA,QAAA,KATGQ,CAWrB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/actions/button/select_group/single_select_group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"single_select_group.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/select_group/single_select_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAElE,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,gBAAgB,EAChB,OAAO,GAAG,UAAU,GAAG,mBAAmB,CAC3C,GACC,yBAAyB,CAAC;AAE5B,eAAO,MAAM,iBAAiB,4GAgC5B,CAAC"}

package/dist/actions/button/select_group/single_select_group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"single_select_group.js","sources":["../../../../src/actions/button/select_group/single_select_group.tsx"],"sourcesContent":["import React from 'react';\nimport { SelectGroup, SelectGroupProps } from './select_group.js';\n\nexport interface SingleSelectGroupOwnProps {\n  value: string;\n  disabled?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport type SingleSelectGroupProps = Omit<\n  SelectGroupProps,\n  'value' | 'onChange' | 'enableMultiselect'\n> &\n  SingleSelectGroupOwnProps;\n\nexport const SingleSelectGroup = React.forwardRef(function SingleSelectGroup(\n  {\n    children,\n    value,\n    className,\n    onChange,\n    disabled = false,\n    ...props\n  }: SingleSelectGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const handleChange = (values: string[]) => {\n    if (values.length === 0) {\n      return;\n    }\n    // For single select, we take the last selected value or empty string if none selected\n    const singleValue = values.length > 0 ? values[values.length - 1] : '';\n    onChange?.(singleValue);\n  };\n\n  return (\n    <SelectGroup\n      ref={ref}\n      value={value != null ? [value] : []}\n      onChange={handleChange}\n      disabled={disabled}\n      className={className}\n      {...props}\n    >\n      {children}\n    </SelectGroup>\n  );\n});\n"],"names":["SingleSelectGroup","React","children","value","className","onChange","disabled","props","ref","handleChange","values","singleValue","jsx","SelectGroup"],"mappings":";;;AAeO,MAAMA,IAAoBC,EAAM,WAAW,SAChD;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAe,CAACC,MAAqB;AACzC,QAAIA,EAAO,WAAW;AACpB;AAGF,UAAMC,IAAcD,EAAO,SAAS,IAAIA,EAAOA,EAAO,SAAS,CAAC,IAAI;AACpE,IAAAL,IAAWM,CAAW;AAAA,EACxB;AAEA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,OAAOL,KAAS,OAAO,CAACA,CAAK,IAAI,CAAA;AAAA,MACjC,UAAUM;AAAA,MACV,UAAAH;AAAA,MACA,WAAAF;AAAA,MACC,GAAGG;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}