@tcn/ui 0.0.4 → 0.2.0

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

@@ -6,90 +6,12 @@
   --button-color-disabled: var(--status-disabled, #cccccc);
 
   min-height: var(--button-height);
-  padding: 4px 8px;
-  border-radius: 4px;
   width: auto;
-  border: 1px solid transparent;
-  outline: none;
   cursor: pointer;
-  background: transparent;
   font-size: calc(14px * var(--scalar, 1));
   line-height: calc(16px * var(--scalar, 1));
 }
 
-.button:focus-visible {
-  outline: 3px solid color-mix(in srgb, var(--button-color) 40%, transparent);
-}
-
-/* Primary */
-.button[data-hierarchy="primary"] {
-  background: var(--button-color);
-  color: #ffffff;
-}
-
-.button[data-hierarchy="primary"]:hover {
-  background: var(--button-color-hover);
-  color: #ffffff;
-}
-
-.button[data-hierarchy="primary"]:active {
-  background: var(--button-color-active);
-  box-shadow: none;
-}
-
-/* Secondary */
-.button[data-hierarchy="secondary"] {
-  color: rgb(57, 85, 120);
-  border-color: rgb(57, 85, 120);
-}
-
-.button[data-hierarchy="secondary"]:hover {
-  background: color-mix(in srgb, rgb(57, 85, 120) 10%, rgb(255, 255, 255, 0.5));
-}
-
-.button[data-hierarchy="secondary"]:active {
-  background: color-mix(in srgb, rgb(57, 85, 120) 25%, rgb(255, 255, 255, 0.5));
-}
-
-/* Tertiary */
-.button[data-hierarchy="tertiary"] {
-  border-color: transparent;
-  color: rgb(57, 85, 120);
-}
-
-.button[data-hierarchy="tertiary"]:hover {
-  text-decoration: underline;
-  text-decoration-color: rgb(57, 85, 120);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 2px;
-}
-
-.button[data-hierarchy="tertiary"]:active {
-  opacity: 0.5;
-}
-
-/* Disabled */
-.button[data-is-disabled="true"] {
-  pointer-events: none;
-  background: var(--button-color-disabled);
-  color: #ffffff;
-  border-color: var(--button-color-disabled);
-}
-
-/* Disabled Secondary */
-.button[data-hierarchy="secondary"][data-is-disabled="true"] {
-  background: transparent;
-  color: var(--button-color-disabled);
-  border-color: var(--button-color-disabled);
-}
-
-/* Disabled Tertiary */
-.button[data-hierarchy="tertiary"][data-is-disabled="true"] {
-  background: transparent;
-  color: var(--button-color-disabled);
-  border-color: transparent;
-}
-
 /* Sizes */
 .button[data-size="sm"] {
   --button-height: calc(22px * var(--scalar, 1));

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

@@ -12,13 +12,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   return (
     <BaseButton
       ref={ref}
-      className={clsx(styles.button, 'button', 'tcn-button', className)}
+      className={clsx(styles.button, 'tcn-button', className)}
       {...props}
     >
       {typeof children === 'string' ? (
-        <span className={clsx(styles['button-text'], 'button-text', 'tcn-button-text')}>
-          {children}
-        </span>
+        <span className={clsx(styles['button-text'], 'tcn-button-text')}>{children}</span>
       ) : (
         children
       )}

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

@@ -5,29 +5,3 @@
 .slim-button[data-is-disabled="true"] {
   pointer-events: none;
 }
-
-.slim-button[data-size="sm"] {
-  padding: 1px;
-}
-
-.slim-button[data-size="md"] {
-  padding: 2px;
-}
-
-.slim-button[data-size="lg"] {
-  padding: 3px;
-}
-
-.slim-button[data-hierarchy="tertiary"][data-is-disabled="true"] {
-  background-color: transparent;
-  border: none;
-  color: var(--button-color-disabled);
-  min-height: auto;
-  pointer-events: none;
-}
-
-.slim-button[data-hierarchy="secondary"][data-is-disabled="true"] {
-  background-color: transparent;
-  border: 1px solid var(--button-color-disabled);
-  color: var(--button-color-disabled);
-}

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

@@ -9,7 +9,7 @@ export const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Button
         ref={ref}
-        className={clsx(styles['slim-button'], 'slim-button', className)}
+        className={clsx(styles['slim-button'], 'tcn-slim-button', className)}
         {...props}
       >
         {children}

package/src/inputs/input/input.tsx

@@ -1,9 +1,10 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 import styles from './input.module.css';
 
-export interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   type?: React.HTMLInputTypeAttribute;
   width?: string;
   height?: string;

package/src/inputs/options/option.tsx

@@ -9,6 +9,7 @@ export interface OptionProps {
   keywords?: string[];
   selected?: boolean;
   disabled?: boolean;
+  obfuscate?: boolean;
 }
 
 export function Option({ children }: OptionProps) {

package/src/inputs/phone_number_input/phone_number_input.module.css

@@ -48,3 +48,15 @@
   max-height: calc(26px * var(--scalar, 1)) !important;
   max-width: calc(26px * var(--scalar, 1)) !important;
 }
+
+.phone-number-input-obfuscated {
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+  width: 100%;
+  height: 100%;
+}
+
+.phone-number-input-obfuscated::selection {
+  background: transparent;
+}

package/src/inputs/phone_number_input/phone_number_input.stories.tsx

@@ -90,6 +90,14 @@ export function PhoneNumberInput() {
               >
                 Bob Johnson - +1 (435) 586-5955
               </Option>
+              <Option
+                value="+14355865956"
+                label="Obfuscated Number"
+                keywords={['obfuscated', 'number']}
+                obfuscate={true}
+              >
+                Obfuscated Number
+              </Option>
             </Base>
           </td>
         </tr>

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -21,6 +21,16 @@ import { NotebookIcon } from '@tcn/icons/notebook_icon.js';
 import { Option, OptionProps } from '../options/option.js';
 import { SuggestionList } from '../suggestions/suggestion_list.js';
 import { stripNonNumericAfterCountryCode } from './utils.js';
+import { useForkRef } from '../../utils/index.js';
+
+const OBFUSCATED_CHARACTER = '•';
+
+function createObfuscatedMasks(masks: { mask: string; placeholder?: string }[]) {
+  return masks.map(m => ({
+    ...m,
+    placeholder: m.mask.replace(/[9a*]/g, OBFUSCATED_CHARACTER),
+  }));
+}
 
 const countryList = countriesPhoneInformation.map(i => ({
   name: i.name,
@@ -108,8 +118,15 @@ function getCountryCodeFromValue(
 export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: string;
+  name?: string;
+  autoComplete?: string;
   defaultCountry?: string;
-  onChange?: (value: string) => void;
+  /**
+   * Callback fired when the phone number value changes.
+   * @param value - The phone number value with country prefix
+   * @param obfuscate - Whether the selected phone number is obfuscated (e.g., from a phone book entry marked as obfuscated)
+   */
+  onChange?: (value: string, obfuscate: boolean) => void;
   countrySelectRef?: React.Ref<HTMLButtonElement>;
   phoneNumberInputRef?: React.Ref<HTMLInputElement>;
   disabled?: boolean;
@@ -120,6 +137,8 @@ export interface PhoneNumberInputProps
 export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
   {
     value = '',
+    name,
+    autoComplete,
     defaultCountry = 'US',
     onChange,
     countrySelectRef: countryRef,
@@ -161,6 +180,10 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
   const [currentMasks, setCurrentMasks] = useState([
     ...countriesPhoneInformation[0].masks,
   ]);
+  const [obfuscateValue, setObfuscateValue] = useState(false);
+  const [shouldFocusAfterClear, setShouldFocusAfterClear] = useState(false);
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const forkedInputRef = useForkRef(numberRef, internalInputRef);
 
   const countryOptions = useMemo(() => {
     return createCountryOptions(allowedCountryCodes);
@@ -183,7 +206,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
 
     const value = `${countryInformation.prefix}${stripNonNumericAfterCountryCode(phoneNumber)}`;
     lastOutputValueRef.current = value;
-    onChange && onChange(value);
+    onChange && onChange(value, false);
   }
 
   useLayoutEffect(() => {
@@ -202,9 +225,14 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     const lineNumber = stripNonNumericAfterCountryCode(newPhoneNumber);
     const outputValue = countryPrefix + lineNumber;
 
+    // Clear obfuscated state when user types manually
+    if (obfuscateValue) {
+      setObfuscateValue(false);
+    }
+
     lastOutputValueRef.current = outputValue;
     phoneNumber !== newPhoneNumber && setPhoneNumber(newPhoneNumber);
-    onChange && onChange(outputValue);
+    onChange && onChange(outputValue, false);
   }
 
   function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {
@@ -219,9 +247,15 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     setPhoneBookElement(null);
   }
 
-  function handlePhoneBookOptionSelect(value: string) {
+  function handlePhoneBookOptionSelect(
+    value: string,
+    _label: string | undefined,
+    _isSuggestion: boolean,
+    obfuscate: boolean
+  ) {
     // Update the phone number with the selected value
-    updatePhoneNumber(value);
+    setObfuscateValue(obfuscate);
+    updatePhoneNumber(value, obfuscate);
     closePhoneBook();
   }
 
@@ -244,8 +278,22 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     return value;
   }
 
+  function handleObfuscatedInputChange(newValue: string) {
+    // When user types on a obfuscated input, clear the obfuscated state and start fresh
+    // The newValue will be the digits the user typed (mask filters to valid input)
+    setShouldFocusAfterClear(true);
+    setObfuscateValue(false);
+    setPhoneNumber(newValue);
+
+    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;
+    const lineNumber = stripNonNumericAfterCountryCode(newValue);
+    const outputValue = countryPrefix + lineNumber;
+    lastOutputValueRef.current = outputValue;
+    onChange && onChange(outputValue, false);
+  }
+
   const updatePhoneNumber = useCallback(
-    (value: string) => {
+    (value: string, obfuscate = false) => {
       const oldValue = lastOutputValueRef.current;
       const countryInformation = getCountryCodeFromValue(
         value,
@@ -259,7 +307,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
 
       if (oldValue !== value) {
         setPhoneNumber(phoneNumber);
-        onChange && onChange(value);
+        onChange && onChange(value, obfuscate);
       }
     },
     [defaultCountry, selectedCountry, onChange]
@@ -269,6 +317,14 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     updatePhoneNumber(value);
   }, [value, updatePhoneNumber]);
 
+  // Focus the input after transitioning from obfuscated to normal mode
+  useLayoutEffect(() => {
+    if (shouldFocusAfterClear && !obfuscateValue && internalInputRef.current) {
+      internalInputRef.current.focus();
+      setShouldFocusAfterClear(false);
+    }
+  }, [shouldFocusAfterClear, obfuscateValue]);
+
   return (
     <HStack
       ref={ref}
@@ -280,25 +336,55 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
         className={clsx(styles['phone-number-input-select'], 'phone-number-input-select')}
         ref={countryRef}
         width="auto"
-        value={countryCode}
+        value={obfuscateValue ? '' : countryCode}
         onChange={changeCountry}
-        disabled={disabled}
-        data-is-disabled={disabled}
+        disabled={disabled || obfuscateValue}
+        data-is-disabled={disabled || obfuscateValue}
+        data-is-obfuscated={obfuscateValue}
+        placeholder={obfuscateValue ? '––' : undefined}
       >
         {countryOptions}
       </Select>
       <HStack width="flex" className={clsx(styles['phone-number-input-container'])}>
-        <MaskInput
-          ref={numberRef}
-          value={phoneNumber}
-          mask={currentMasks}
-          onChange={transformValue}
-          disabled={disabled}
-          data-is-disabled={disabled}
-          data-has-phone-book={showPhoneBook}
-          className={clsx(styles['phone-number-input'], 'phone-number-input')}
-          preparePasteValue={preparePasteValue}
-        />
+        {obfuscateValue ? (
+          <MaskInput
+            key="obfuscated"
+            name={name}
+            autoComplete={autoComplete}
+            ref={forkedInputRef}
+            value=""
+            mask={createObfuscatedMasks(currentMasks)}
+            onChange={handleObfuscatedInputChange}
+            disabled={disabled}
+            data-is-disabled={disabled}
+            data-has-phone-book={showPhoneBook}
+            data-is-obfuscated={true}
+            className={clsx(
+              styles['phone-number-input'],
+              styles['phone-number-input-obfuscated'],
+              'phone-number-input'
+            )}
+            preparePasteValue={() => ''}
+            prepareCopyValue={() => ''}
+            prepareCutValue={() => ''}
+          />
+        ) : (
+          <MaskInput
+            key="normal"
+            name={name}
+            autoComplete={autoComplete}
+            ref={forkedInputRef}
+            value={phoneNumber}
+            mask={currentMasks}
+            onChange={transformValue}
+            disabled={disabled}
+            data-is-disabled={disabled}
+            data-has-phone-book={showPhoneBook}
+            data-is-obfuscated={false}
+            className={clsx(styles['phone-number-input'], 'phone-number-input')}
+            preparePasteValue={preparePasteValue}
+          />
+        )}
       </HStack>
       {showPhoneBook && (
         <>

package/src/inputs/suggestions/suggestion_item.tsx

@@ -6,7 +6,12 @@ export interface SuggestionItemProps {
   isFocused: boolean;
   isSelected: boolean;
   option: React.ReactElement;
-  onClick?: (value: string, label: string, isSuggestion: boolean) => void;
+  onClick?: (
+    value: string,
+    label: string,
+    isSuggestion: boolean,
+    obfuscate: boolean
+  ) => void;
 }
 
 export function SuggestionItem({
@@ -43,7 +48,12 @@ export function SuggestionItem({
       disabled={isDisabled}
       onClick={() => {
         if (!isDisabled && onClick) {
-          onClick(option.props.value, option.props.label, true);
+          onClick(
+            option.props.value,
+            option.props.label,
+            true,
+            option.props.obfuscate ?? false
+          );
         }
       }}
     >

package/src/inputs/suggestions/suggestion_list.tsx

@@ -25,7 +25,8 @@ export interface SuggestionListProps
   onOptionSelect?: (
     value: string,
     label: string | undefined,
-    isSuggestion: boolean
+    isSuggestion: boolean,
+    obfuscate: boolean
   ) => void;
   noSuggestionMessage?: React.ReactNode;
   trimCustomInput?: boolean;
@@ -112,7 +113,13 @@ export function SuggestionList({
             const optionValue = option?.props.value || value;
 
             requestAnimationFrame(() => {
-              onOptionSelect && onOptionSelect(optionValue, label, isSuggestion);
+              onOptionSelect &&
+                onOptionSelect(
+                  optionValue,
+                  label,
+                  isSuggestion,
+                  option?.props.obfuscate ?? false
+                );
             });
 
             break;
@@ -126,7 +133,13 @@ export function SuggestionList({
           }
 
           requestAnimationFrame(() => {
-            onOptionSelect && onOptionSelect(optionProps.value, optionProps.label, true);
+            onOptionSelect &&
+              onOptionSelect(
+                optionProps.value,
+                optionProps.label,
+                true,
+                optionProps.obfuscate ?? false
+              );
           });
           break;
         }
@@ -260,6 +273,12 @@ export function SuggestionList({
       const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];
       const optionValue = String(props.value).toLocaleLowerCase();
       const searchValue = value.toLocaleLowerCase();
+      const obfuscate = props.obfuscate ?? false;
+
+      // Obfuscated options can only be searched by label or keywords, not by value
+      if (obfuscate) {
+        return label.includes(searchValue) || keywords.some(k => k.includes(searchValue));
+      }
 
       return (
         label.includes(searchValue) ||

package/src/inputs/textarea/textarea.tsx

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { HTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
 import styles from './textarea.module.css';
 
 export interface TextareaProps
-  extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
   value?: string;
   width?: string;
   height?: string;

package/src/layouts/footer/footer.module.css

@@ -1,7 +1,6 @@
 .footer {
   width: 100%;
   min-height: 0;
-  border-top: 1px solid rgb(221, 221, 221);
   padding: var(--padding) var(--padding-large);
   gap: var(--gap);
 }

package/src/layouts/footer/footer.tsx

@@ -18,7 +18,7 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
     <HStack
       ref={ref}
       as="footer"
-      className={clsx(styles.footer, className, 'footer', 'tcn-footer')}
+      className={clsx(styles.footer, className, 'tcn-footer')}
       data-hierarchy={hierarchy}
       data-size={size}
       {...props}

package/src/layouts/header/header.tsx

@@ -4,7 +4,6 @@ import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
 import styles from './header.module.css';
 
-// UtilityBar
 export interface HeaderProps extends Omit<HStackProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;

package/src/layouts/index.ts

@@ -1,3 +1,5 @@
+export * from './body/h_body.js';
+export * from './body/v_body.js';
 export * from './column/column.js';
 export * from './divider/divider.js';
 export * from './footer/footer.js';
@@ -8,5 +10,4 @@ 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';
-export * from './body/h_body.js';
-export * from './body/v_body.js';
+export * from './utility_bar/utility_bar.js';

package/src/layouts/list/item.tsx

@@ -4,14 +4,22 @@ import { clsx } from 'clsx';
 
 export interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {
   children?: React.ReactNode;
+  selected?: boolean;
 }
 
 export const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
-  { children, className, ...props }: ItemProps,
+  { children, className, selected = false, ...props }: ItemProps,
   ref
 ) {
   return (
-    <HStack ref={ref} as="li" className={clsx('item', className)} {...props}>
+    <HStack
+      ref={ref}
+      as="li"
+      data-hierarchy={selected ? 'primary' : 'tertiary'}
+      data-is-selected={selected}
+      className={clsx('tcn-item', 'tcn-interactive', className)}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/layouts/list/list.tsx

@@ -6,7 +6,7 @@ export interface ListProps extends Omit<VStackProps, 'as'> {
   isOrdered?: boolean;
 }
 
-export const List = React.forwardRef<HTMLDivElement, ListProps>(function Item(
+export const List = React.forwardRef<HTMLDivElement, ListProps>(function List(
   { children, className, isOrdered = false, ...props }: ListProps,
   ref
 ) {
@@ -14,7 +14,7 @@ export const List = React.forwardRef<HTMLDivElement, ListProps>(function Item(
     <VStack
       ref={ref}
       as={isOrdered ? 'ol' : 'ul'}
-      className={clsx('list', className)}
+      className={clsx('tcn-list', className)}
       {...props}
     >
       {children}

package/src/overlay/frame/frame.stories.tsx

@@ -0,0 +1,40 @@
+import { ZStack } from '../../stacks/z_stack.js';
+import { Frame, type FrameOwnProps } from './frame.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
+import { Title } from '../../typography/title/title.js';
+import { BodyText } from '../../typography/index.js';
+import { Header } from '../../layouts/index.js';
+import styles from './frame_stories.module.css';
+export default {
+  title: 'Overlay/Floating/Frame',
+  component: Frame,
+  tags: ['autodocs'],
+
+  args: {
+    isOpen: true,
+    draggable: true,
+    veil: false,
+  },
+};
+
+export const FrameStory = (args: Omit<FrameOwnProps, 'children'>) => {
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <Frame
+        width="300px"
+        height="300px"
+        className={styles['sb-frame-container']}
+        {...args}
+      >
+        <Header className={styles['sb-frame-header']}>
+          <Title> This is a frame</Title>
+        </Header>
+        <DragHandle>
+          <Header className={styles['sb-frame-header']}>
+            <BodyText> You can drag here.</BodyText>
+          </Header>
+        </DragHandle>
+      </Frame>
+    </ZStack>
+  );
+};

package/src/overlay/frame/frame.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ZStack, type ZStackProps } from '../../stacks/index.js';
+import { Portal } from '../portal/portal.js';
+import { Draggable } from '../../utils/dnd/draggable/draggable.js';
+
+export interface FrameOwnProps {
+  isOpen?: boolean;
+  children?: React.ReactNode;
+  draggable?: boolean;
+  veil?: boolean;
+}
+
+export type FrameProps = ZStackProps & FrameOwnProps;
+
+export const Frame = React.forwardRef<HTMLDialogElement, FrameProps>(function Frame(
+  { children, isOpen = false, draggable = true, veil = false, ...rest }: FrameProps,
+  ref
+) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <ZStack width="100%" height="100%" data-is-veil={veil} className="tcn-frame">
+        <Draggable draggable={draggable}>
+          <ZStack ref={ref} {...rest}>
+            {children}
+          </ZStack>
+        </Draggable>
+      </ZStack>
+    </Portal>
+  );
+});