@12-apps/ui 2.1.0 → 3.1.0

package/src/components/form/Switch/Switch.types.ts

@@ -11,7 +11,7 @@ export interface SwitchProps extends Omit<MuiSwitchProps, 'color' | 'size'> {
   /**
    * The color theme of the switch
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * The size of the switch

package/src/components/form/Textarea/Textarea.styles.ts

@@ -80,6 +80,7 @@ export const getColorFromTheme = (theme: Theme, color: string): ResolvedPalette
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/Textarea/Textarea.types.ts

@@ -11,7 +11,7 @@ export interface TextareaProps extends Omit<TextareaAutosizeProps, 'variant' | '
   /**
    * The color theme of the textarea
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * The size of the textarea

package/src/components/form/Toggle/Toggle.styles.ts

@@ -42,6 +42,7 @@ export const getColorFromTheme = (theme: Theme, color: string): TogglePalette =>
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/Toggle/Toggle.types.ts

@@ -11,7 +11,7 @@ export interface ToggleProps extends Omit<ToggleButtonProps, 'color' | 'size'> {
   /**
    * The color theme of the toggle
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * The size of the toggle

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -20,6 +20,7 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/ToggleGroup/ToggleGroup.types.ts

@@ -18,7 +18,7 @@ export interface ToggleGroupProps extends Omit<ToggleButtonGroupProps, 'color' |
   /**
    * The color theme of the toggle group
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * The size of the toggle group

package/src/components/form/index.ts

@@ -7,6 +7,7 @@ export * from './CepField';
 export * from './Checkbox';
 export * from './CodeEditor';
 export * from './Command';
+export * from './DateRangePicker';
 export * from './Form';
 export * from './Input';
 export * from './InputOTP';

package/src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx

@@ -207,6 +207,9 @@ export const breadcrumbLinkStyles = ({
       padding: theme.spacing(0.375, 0.5) } });
 
 export const sizeIconMap = {
-  sm: 'small' as const,
-  md: 'small' as const,
-  lg: 'medium' as const };
+  xs: 'small',
+  sm: 'small',
+  md: 'small',
+  lg: 'medium',
+  xl: 'medium',
+} as const;

package/src/components/navigation/Breadcrumbs/Breadcrumbs.types.ts

@@ -106,7 +106,7 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'>
    * Size of the breadcrumbs
    * @default 'md'
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Color scheme for separators and accents

package/src/components/navigation/ContextMenu/ContextMenu.types.ts

@@ -83,7 +83,7 @@ export interface ContextMenuProps extends Omit<MenuProps, 'open' | 'anchorEl' |
   /**
    * Size of the menu items
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Custom className for the trigger element

package/src/components/navigation/DropdownMenu/DropdownMenu.types.ts

@@ -102,7 +102,7 @@ export interface DropdownMenuProps extends Omit<MenuProps, 'open' | 'variant'> {
   /**
    * Size of the menu items
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Maximum height of the menu

package/src/components/navigation/NavigationMenu/NavigationMenu.types.ts

@@ -86,7 +86,7 @@ export interface NavigationMenuProps {
   /**
    * Size of the menu items
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
 
   /**
    * Minimal style with no borders, shadows, or container backgrounds

package/src/components/navigation/Pagination/Pagination.types.ts

@@ -11,7 +11,7 @@ export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 's
   /**
    * Size of the pagination buttons
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Current page number

package/src/components/navigation/Tabs/Tabs.types.ts

@@ -58,7 +58,7 @@ export interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'children' | '
   /**
    * Size of the tabs
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Array of tab items

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -20,6 +20,7 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/typography/Blockquote/Blockquote.types.ts

@@ -7,6 +7,6 @@ export interface BlockquoteProps extends React.HTMLAttributes<HTMLElement> {
   variant?: BlockquoteVariant;
   author?: string;
   source?: string;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   children: React.ReactNode;
 }

package/src/components/typography/Code/Code.types.ts

@@ -8,6 +8,6 @@ export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   language?: string;
   copyable?: boolean;
   lineNumbers?: boolean;
-  size?: Extract<SizeValue, 'xs' | 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   children: React.ReactNode;
 }

package/src/components/typography/Heading/Heading.styles.ts

@@ -1,24 +1,32 @@
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { HeadingProps } from './Heading.types';
+import type { ColorValue } from '../../../tokens/scales';
 
 type Level = NonNullable<HeadingProps['level']>;
 type Weight = NonNullable<HeadingProps['weight']>;
 
-const getColorFromTheme = (theme: Theme, color: string): string => {
+// Exhaustive over ColorValue, and deliberately without a fallback. The map
+// happened to hold all seven already, but it was `Record<string, string>` with
+// `|| text.primary` behind it — so nothing kept it that way, and the eighth
+// colour would have rendered as ordinary body text with no complaint. That is
+// the failure this whole vocabulary exists to make impossible; `Text` was
+// tightened the same way and this one was missed.
+const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
   if (color === 'neutral') {
     return theme.palette.text.primary;
   }
 
-  const colorMap: Record<string, string> = {
+  const colorMap: Record<Exclude<ColorValue, 'neutral'>, string> = {
     primary: theme.palette.primary.main,
     secondary: theme.palette.secondary.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
     danger: theme.palette.error.main,
   };
 
-  return colorMap[color] || theme.palette.text.primary;
+  return colorMap[color];
 };
 
 const WEIGHTS: Record<Weight, number> = {
@@ -50,22 +58,30 @@ const PRIMARY_STOPS = (theme: Theme): [string, string] => [
   theme.palette.secondary.main,
 ];
 
-const GRADIENT_STOPS: Record<string, (theme: Theme) => [string, string]> = {
+// Keyed over the whole vocabulary, with no `?? PRIMARY_STOPS` behind it. Two
+// stops were missing — `info` and `neutral` — so a gradient heading in either
+// colour painted the PRIMARY gradient and looked deliberate while ignoring the
+// prop entirely. The fallback is what hid it, so the fallback is gone.
+const GRADIENT_STOPS: Record<ColorValue, (theme: Theme) => [string, string]> = {
   primary: PRIMARY_STOPS,
   secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
   success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
   warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],
   danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+  // The grey ramp has no light/dark pair, and every stop on it is
+  // `string | undefined` under `noUncheckedIndexedAccess`.
+  neutral: (theme) => [theme.palette.grey[500] ?? '#9e9e9e', theme.palette.grey[900] ?? '#212121'],
 };
 
-const gradientFor = (theme: Theme, color: string) => {
-  const [from, to] = (GRADIENT_STOPS[color] ?? PRIMARY_STOPS)(theme);
+const gradientFor = (theme: Theme, color: ColorValue) => {
+  const [from, to] = GRADIENT_STOPS[color](theme);
   return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
 };
 
 export interface HeadingFlags {
   customLevel?: string;
-  customColor?: string;
+  customColor?: ColorValue;
   customWeight?: string;
   gradient?: boolean;
 }

package/src/components/typography/Heading/Heading.types.ts

@@ -5,7 +5,7 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'display';
 
 export interface HeadingProps extends React.HTMLAttributes<globalThis.HTMLHeadingElement> {
   level?: HeadingLevel;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   gradient?: boolean;
   children: React.ReactNode;

package/src/components/typography/Paragraph/Paragraph.tsx

@@ -15,6 +15,7 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
     danger: theme.palette.error.main,
   };
 

package/src/components/typography/Paragraph/Paragraph.types.ts

@@ -5,7 +5,7 @@ export type ParagraphVariant = 'default' | 'lead' | 'muted' | 'small';
 
 export interface ParagraphProps extends React.HTMLAttributes<globalThis.HTMLParagraphElement> {
   variant?: ParagraphVariant;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   size?: SizeValue;
   children: React.ReactNode;
 }

package/src/components/typography/Text/Text.tsx

@@ -6,8 +6,9 @@ import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import type { TextProps } from './Text.types';
+import type { ColorValue } from '../../../tokens/scales';
 
-const getColorFromTheme = (theme: Theme, color: string) => {
+const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
   if (color === 'neutral') {
     return theme.palette.text.primary;
   }
@@ -16,14 +17,19 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     return theme.palette.text.secondary;
   }
 
-  const colorMap: Record<string, string> = {
+  // Exhaustive over ColorValue on purpose. It was a partial `Record<string, …>`
+  // with a silent `|| text.primary` fallback, so `info` — accepted by the type
+  // — rendered as ordinary body text. Typing the key means a colour added to
+  // the vocabulary cannot reach here without a home.
+  const colorMap: Record<Exclude<ColorValue, 'neutral' | 'secondary'>, string> = {
     primary: theme.palette.primary.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
     danger: theme.palette.error.main,
   };
 
-  return colorMap[color] || theme.palette.text.primary;
+  return colorMap[color];
 };
 
 const SIZE_MAP: Record<string, { fontSize: string; lineHeight: number }> = {
@@ -45,7 +51,7 @@ const WEIGHT_MAP: Record<string, number> = {
 interface TextStyleArgs {
   theme: Theme;
   customVariant?: string;
-  customColor?: string;
+  customColor?: ColorValue;
   customSize?: string;
   customWeight?: string;
   italic?: boolean;
@@ -119,7 +125,7 @@ const StyledText = styled(Typography, {
     ].includes(prop as string),
 })<{
   customVariant?: string;
-  customColor?: string;
+  customColor?: ColorValue;
   customSize?: string;
   customWeight?: string;
   italic?: boolean;

package/src/components/typography/Text/Text.types.ts

@@ -5,7 +5,7 @@ export type TextVariant = 'body' | 'heading' | 'caption' | 'code';
 
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   variant?: TextVariant;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   size?: SizeValue;
   weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   as?: keyof React.JSX.IntrinsicElements;

package/src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts

@@ -24,6 +24,7 @@ import {
 import type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';
 
 export const sizeConfigs: Record<AnimationSize, { size: number; fontSize: number }> = {
+  xs: { size: 12, fontSize: 10 },
   sm: { size: 24, fontSize: 20 },
   md: { size: 32, fontSize: 28 },
   lg: { size: 48, fontSize: 44 },

package/src/components/utility/AnimatedIcon/AnimatedIcon.types.ts

@@ -20,7 +20,7 @@ export type AnimationVariant =
   | 'neonFlicker'
   | 'breathe';
 
-export type AnimationSize = Extract<SizeValue, 'sm' | 'md' | 'lg' | 'xl'>;
+export type AnimationSize = SizeValue;
 
 export type ShadowStyle = 'soft' | 'hard' | 'elevated' | 'none';
 

package/src/components/utility/WorkflowStep/WorkflowStep.types.ts

@@ -19,7 +19,7 @@ export type WorkflowStepOrientation = 'horizontal' | 'vertical';
 /**
  * Color theme for the workflow step component
  */
-export type WorkflowStepColor = Exclude<ColorValue, 'info'>;
+export type WorkflowStepColor = ColorValue;
 
 /**
  * Size variant for step indicators

package/src/tokens/scales.ts

@@ -18,13 +18,13 @@ import type { Theme } from '@mui/material/styles';
  *
  * So the vocabulary is declared once, here, and components derive from it.
  *
- * DERIVE, DON'T COPY, AND SUBSET HONESTLY. A component that cannot draw the
- * whole scale narrows with `Extract` rather than restating a union — an
- * independent copy is what drifts. And it narrows rather than accepting the lot:
- * a MUI chip draws two sizes, so putting `lg` in its type would promise
- * something nothing can render.
- *
- *     size?: Extract<SizeValue, 'sm' | 'md'>;
+ * DERIVE, DON'T COPY — AND TAKE THE WHOLE VOCABULARY. Every size prop is
+ * `SizeValue` and every colour prop is `ColorValue`, with no `Extract` and no
+ * `Exclude`. Handing a component a slice was tried and undone: it is the same
+ * fragmentation wearing the canonical type's name, and it leaves a caller having
+ * to remember which components accept `xs` and which accept `info`. Where the
+ * underlying widget draws fewer steps than five, that is a rendering detail and
+ * belongs at the MUI boundary below — not in the prop's type.
  *
  * A component whose size or colour is not this concept at all keeps its own type
  * — `Scrollbar`'s `thin|medium|thick` is a track width, `Sheet`'s `full` is a
@@ -37,9 +37,17 @@ import type { Theme } from '@mui/material/styles';
  *
  * Abbreviated, because that is what 26 of the 30 components with a real size
  * already used and what every caller has been taught to write.
+ *
+ * Declared as the array and the type together so the two cannot disagree. The
+ * runtime list is what Storybook `argTypes.options` and the demo grids iterate;
+ * spelled by hand in each story it drifts, and it had — twelve colour lists
+ * omitted `info`, so the control that documents the vocabulary offered a
+ * component less than the component accepted.
  */
 export type SizeValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+export const SIZE_VALUES = ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly SizeValue[];
+
 /**
  * The house colour vocabulary.
  *
@@ -53,6 +61,8 @@ export type SizeValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  * component calls its unaccented state). The translation must be a real mapping
  * and never a cast: a cast is precisely what let `danger` through untouched and
  * had MUI fall back to grey.
+ *
+ * Array and type declared together, for the reason given on {@link SIZE_VALUES}.
  */
 export type ColorValue =
   | 'primary'
@@ -63,6 +73,47 @@ export type ColorValue =
   | 'danger'
   | 'neutral';
 
+export const COLOR_VALUES = [
+  'primary',
+  'secondary',
+  'success',
+  'warning',
+  'info',
+  'danger',
+  'neutral',
+] as const satisfies readonly ColorValue[];
+
+/* ── Array and union, pinned to each other ────────────────────────────────── */
+
+/**
+ * The arrays above are written out rather than derived, because deriving the
+ * union from the array (`(typeof COLOR_VALUES)[number]`) costs the alias its
+ * name: TypeScript resolves the indexed access eagerly, and every error in the
+ * package stops saying `not assignable to type 'ColorValue'` and starts dumping
+ * seven string literals. In a package whose entire purpose is teaching this
+ * vocabulary, the name in the error message is worth keeping.
+ *
+ * Writing both means they could disagree, so both directions are checked here.
+ * `satisfies` above catches an entry that is not a member. These catch the other
+ * half — a member missing from the array — which `satisfies` cannot see and
+ * which is the direction that actually bit: twelve story control lists offered
+ * six colours for a vocabulary of seven, so `info` was undocumented everywhere.
+ *
+ * A gap makes the assignment below fail, and the error names the missing member.
+ */
+type Missing<Union extends string, Listed extends string> = Exclude<Union, Listed>;
+
+const _allSizesListed: Missing<SizeValue, (typeof SIZE_VALUES)[number]> extends never
+  ? true
+  : never = true;
+
+const _allColorsListed: Missing<ColorValue, (typeof COLOR_VALUES)[number]> extends never
+  ? true
+  : never = true;
+
+void _allSizesListed;
+void _allColorsListed;
+
 /* ── The MUI boundary ─────────────────────────────────────────────────────── */
 
 /** What MUI calls a size. Three entries against our five. */