@tcn/ui 0.0.4 → 0.1.1

package/dist/tokens/chip/chip.js

@@ -1,15 +1,16 @@
-import { jsx as p } from "react/jsx-runtime";
-import { HStack as m } from "../../stacks/h_stack.js";
+import { jsx as m } from "react/jsx-runtime";
+import { HStack as n } from "../../stacks/h_stack.js";
 import { clsx as f } from "clsx";
 import h from "react";
 import { theme as s } from "../../themes/theme_variables.js";
-import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, w = h.forwardRef(function({ children: t, style: o, className: i, color: r = s.accentColor, ...c }, e) {
-  const n = {
+import "../../themes/stylesheets/reset.js";
+import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, R = h.forwardRef(function({ children: t, style: o, className: i, color: r = s.accentColor, ...c }, e) {
+  const p = {
     "--chip-color": r,
     ...o
   };
-  return /* @__PURE__ */ p(
-    m,
+  return /* @__PURE__ */ m(
+    n,
     {
       ref: e,
       inline: !0,
@@ -17,13 +18,13 @@ import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, w = h.forwar
       height: "auto",
       vAlign: "center",
       className: f(a.chip, "chip", i),
-      style: n,
+      style: p,
       ...c,
       children: t
     }
   );
 });
 export {
-  w as Chip
+  R as Chip
 };
 //# sourceMappingURL=chip.js.map

package/dist/tokens/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../src/tokens/chip/chip.tsx"],"sourcesContent":["import { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './chip.module.css';\nimport { theme } from '../../themes/index.js';\n\nexport interface ChipProps extends HStackProps {\n  children?: React.ReactNode;\n  color?: string;\n  disabled?: boolean;\n}\n\nexport const Chip = React.forwardRef(function Chip(\n  { children, style, className, color = theme.accentColor, ...props }: ChipProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    '--chip-color': color,\n    ...style,\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      vAlign=\"center\"\n      className={clsx(styles.chip, 'chip', className)}\n      style={finalStyle}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Chip","React","children","style","className","color","theme","props","ref","finalStyle","jsx","HStack","clsx","styles"],"mappings":";;;;;4CAYaA,IAAOC,EAAM,WAAW,SACnC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,OAAAC,IAAQC,EAAM,aAAa,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,gBAAgBJ;AAAA,IAChB,GAAGF;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,WAAWI,EAAKC,EAAO,MAAM,QAAQT,CAAS;AAAA,MAC9C,OAAOK;AAAA,MACN,GAAGF;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"chip.js","sources":["../../../src/tokens/chip/chip.tsx"],"sourcesContent":["import { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './chip.module.css';\nimport { theme } from '../../themes/index.js';\n\nexport interface ChipProps extends HStackProps {\n  children?: React.ReactNode;\n  color?: string;\n  disabled?: boolean;\n}\n\nexport const Chip = React.forwardRef(function Chip(\n  { children, style, className, color = theme.accentColor, ...props }: ChipProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    '--chip-color': color,\n    ...style,\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      vAlign=\"center\"\n      className={clsx(styles.chip, 'chip', className)}\n      style={finalStyle}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Chip","React","children","style","className","color","theme","props","ref","finalStyle","jsx","HStack","clsx","styles"],"mappings":";;;;;;4CAYaA,IAAOC,EAAM,WAAW,SACnC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,OAAAC,IAAQC,EAAM,aAAa,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,gBAAgBJ;AAAA,IAChB,GAAGF;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,WAAWI,EAAKC,EAAO,MAAM,QAAQT,CAAS;AAAA,MAC9C,OAAOK;AAAA,MACN,GAAGF;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/typography/title/title.js

@@ -4,30 +4,30 @@ import { s as x } from "../../title.module-B16de2jd.js";
 function A({
   size: a = "md",
   emphasis: o = "normal",
-  hierarchy: c = "primary",
+  hierarchy: p = "primary",
   color: n,
-  children: g,
-  className: h,
+  children: c,
+  className: g,
   style: i = {},
   padStart: r,
   padEnd: e,
   padBottom: f,
   padTop: l,
   pad: m,
-  selectable: p = !0,
+  selectable: h = !0,
   as: d
 }) {
   let t = d;
   return d == null && (a === "lg" ? t = "h1" : a === "md" ? t = "h2" : t = "h3"), m && (i.padding = m), r && (i.paddingInlineStart = r), e && (i.paddingInlineEnd = e), l && (i.paddingTop = l), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ s(
     t,
     {
-      "data-hierarchy": c,
+      "data-hierarchy": p,
       "data-emphasis": o,
-      "data-selectable": p,
-      className: u(x.title, "title", "tcn-title", h),
+      "data-selectable": h,
+      className: u(x.title, "title", "tcn-typography", "tcn-title", g),
       style: i,
       "data-size": a,
-      children: g
+      children: c
     }
   );
 }

package/dist/typography/title/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Title({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n  as,\n}: TitleProps) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","clsx","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAKC,EAAO,OAAU,SAAS,aAAaZ,CAAS;AAAA,MAChE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Title({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n  as,\n}: TitleProps) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","clsx","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAKC,EAAO,OAAU,SAAS,kBAAkB,aAAaZ,CAAS;AAAA,MAClF,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -128,8 +128,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/state": "1.0.0",
-    "@tcn/icons": "2.1.0"
+    "@tcn/icons": "2.1.1",
+    "@tcn/state": "1.0.1"
   },
   "scripts": {
     "build": "vite build",

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

@@ -27,7 +27,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       style,
       color,
       hierarchy = 'secondary',
-      size = 'medium',
+      size = 'md',
       onTouchStart,
       onContextMenu,
       ...props
@@ -68,7 +68,12 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         data-hierarchy={hierarchy}
         data-size={size}
         data-is-disabled={Boolean(props.disabled)}
-        className={clsx(styles['base-button'], 'base-button', className)}
+        className={clsx(
+          styles['base-button'],
+          'tcn-interactive',
+          'tcn-base-button',
+          className
+        )}
         style={finalStyle}
         onTouchStart={handleTouchStart}
         onContextMenu={handleContextMenu}

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,
@@ -109,7 +119,12 @@ export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: 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;
@@ -161,6 +176,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 +202,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 +221,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 +243,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 +274,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 +303,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 +313,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 +332,51 @@ 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"
+            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"
+            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/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/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';