@nswds/app 1.18.3 → 1.19.0

package/dist/index.d.cts

@@ -96,29 +96,31 @@ declare function AvatarFallback({
 declare const badgeVariants: (
   props?:
     | ({
-        variant?:
-          | 'primary/neutral'
+        variant?: 'solid' | 'soft' | 'surface' | 'outline' | null | undefined
+        color?:
+          | 'primary/grey'
           | 'light'
           | 'primary/white'
           | 'white'
-          | 'neutral'
+          | 'grey'
           | 'primary'
           | 'secondary'
           | 'tertiary'
           | 'accent'
-          | 'outline'
-          | 'ghost'
-          | 'error'
+          | 'danger'
           | 'success'
           | 'warning'
           | 'info'
           | null
           | undefined
+        size?: 'default' | 'sm' | 'lg' | null | undefined
       } & class_variance_authority_types.ClassProp)
     | undefined,
 ) => string
 declare function Badge({
   variant,
+  color,
+  size,
   className,
   ...props
 }: VariantProps<typeof badgeVariants> &
@@ -128,24 +130,24 @@ declare const BadgeButton: React__default.ForwardRefExoticComponent<
     (
       props?:
         | ({
-            variant?:
-              | 'primary/neutral'
+            variant?: 'solid' | 'soft' | 'surface' | 'outline' | null | undefined
+            color?:
+              | 'primary/grey'
               | 'light'
               | 'primary/white'
               | 'white'
-              | 'neutral'
+              | 'grey'
               | 'primary'
               | 'secondary'
               | 'tertiary'
               | 'accent'
-              | 'outline'
-              | 'ghost'
-              | 'error'
+              | 'danger'
               | 'success'
               | 'warning'
               | 'info'
               | null
               | undefined
+            size?: 'default' | 'sm' | 'lg' | null | undefined
           } & class_variance_authority_types.ClassProp)
         | undefined,
     ) => string
@@ -170,6 +172,7 @@ declare const BadgeButton: React__default.ForwardRefExoticComponent<
               onMouseEnter?: React__default.MouseEventHandler<HTMLAnchorElement>
               onTouchStart?: React__default.TouchEventHandler<HTMLAnchorElement>
               onClick?: React__default.MouseEventHandler<HTMLAnchorElement>
+              onNavigate?: (event: { preventDefault: () => void }) => void
             } & Omit<
               React__default.DetailedHTMLProps<
                 React__default.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -186,44 +189,19 @@ declare const BadgeButton: React__default.ForwardRefExoticComponent<
     React__default.RefAttributes<HTMLElement>
 >
 
-declare function Breadcrumb({
-  ...props
-}: React$1.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element
-declare function BreadcrumbList({
-  className,
-  ...props
-}: React$1.ComponentProps<'ol'>): react_jsx_runtime.JSX.Element
-declare function BreadcrumbItem({
-  className,
-  ...props
-}: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element
-declare function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React$1.ComponentProps<'a'> & {
-  asChild?: boolean
-}): react_jsx_runtime.JSX.Element
-declare function BreadcrumbPage({
-  className,
-  ...props
-}: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element
-declare function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element
-declare function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element
-
 type IconProps = React.HTMLAttributes<SVGElement>
 interface LayoutProps {
   children: React.ReactNode
   sitename?: string
   toc?: boolean
 }
+type Format = 'hex' | 'oklch' | 'hsl' | 'rgb'
+type Variant = 'shades' | 'theme'
+type Output = 'css' | 'ts' | 'scss' | 'less' | 'tailwind' | 'json' | 'json-DTFM' | 'js'
+type ViewMode = 'grid' | 'list'
+type DataType = 'css' | 'scss' | 'less' | 'tailwind' | 'json' | 'json-DTFM' | 'js'
+type ThemeCategory = 'brand' | 'aboriginal'
+type ThemeOption = string
 type ColorProperty = {
   value:
     | string
@@ -234,6 +212,14 @@ type ColorProperty = {
       }
   type: 'color'
 }
+type Palette = {
+  baseColors: string[]
+  name: string
+  themeColor?: string
+}
+interface ColourScaleProps {
+  colorsToUse: ColorData[]
+}
 type colorCategories = {
   name: string
   colors: {
@@ -250,9 +236,6 @@ type ColorThemes = {
     [key: string]: colorCategories
   }
 }
-type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch'
-type ViewMode = 'grid' | 'list'
-type ThemeOption = string
 type ColorTheme = {
   [key: string]: {
     name: string
@@ -288,40 +271,6 @@ interface Color {
   hsl: string
   name?: string
 }
-type ThemeCategory = 'brand' | 'aboriginal'
-interface ThemeSelectorProps {
-  themeCategory: ThemeCategory
-  setThemeCategory: (category: ThemeCategory) => void
-  primaryColor: string
-  setPrimaryColor: (color: string) => void
-  accentColor: string
-  setAccentColor: (color: string) => void
-  availableAccentColors: string[]
-  colorThemes: ColorThemes
-}
-interface FormatToggleProps {
-  format: ColorFormat
-  setFormat: (format: ColorFormat) => void
-}
-type SimpleNode = {
-  type: string
-  attributes: {
-    content?: string
-    [key: string]: string | number | boolean | undefined
-  }
-  children?: SimpleNode[]
-}
-type HeadingNode = {
-  level: number
-  id: string
-  title: string
-  children: HeadingNode[]
-}
-type Link$1 = {
-  href: string
-  title: string
-  links?: Link$1[]
-}
 interface ColorData {
   oklch: string
   hex: string
@@ -329,23 +278,39 @@ interface ColorData {
   hsl: string
   [key: string]: string
 }
-type Format = 'hex' | 'oklch' | 'hsl' | 'rgb'
-type Variant = 'shades' | 'theme'
-type Output = 'css' | 'ts' | 'scss' | 'less' | 'tailwind' | 'json' | 'json-DTFM' | 'js'
 interface ColorsDisplayProps {
-  baseColors: string[]
-  themeColor: string | undefined
+  colorCategories?: colorCategories[]
+  baseColors?: string[]
+  themeColor?: string | undefined
   colorsToUse: ColorData[]
   paletteName: string
   variant: Variant
+  format: Format
+  viewMode: ViewMode
+}
+interface ColorSwatchesProps {
+  theme: Color[]
+  format: Format
+  viewMode: ViewMode
 }
 interface ColourOutputProps {
+  colorCategories: colorCategories[]
   colorsToUse: ColorData[]
   paletteName: string
   format: Format
   output: Output
   variant: Variant
 }
+interface ThemeSelectorProps {
+  themeCategory: ThemeCategory
+  setThemeCategory: (category: ThemeCategory) => void
+  primaryColor: string
+  setPrimaryColor: (color: string) => void
+  accentColor: string
+  setAccentColor: (color: string) => void
+  availableAccentColors: string[]
+  colorThemes: ColorThemes
+}
 interface DesignTokensShades {
   [paletteName: string]: {
     [shade: string]: {
@@ -378,6 +343,45 @@ interface DesignTokensTheme {
     >
   }
 }
+interface FormatToggleProps {
+  format: Format
+  setFormat: (format: Format) => void
+}
+interface DataTypeSelectProps {
+  dataType: DataType
+  setDataType: (format: DataType) => void
+}
+type TableOfContentsItem = {
+  id: string
+  children: TableOfContentsItem[]
+  title: string
+}
+type TableOfContentsProps = {
+  tableOfContents: TableOfContentsItem[]
+}
+interface TocContextType {
+  toc: boolean
+  setToc: Dispatch<SetStateAction<boolean>>
+}
+type SimpleNode = {
+  type: string
+  attributes: {
+    content?: string
+    [key: string]: string | number | boolean | undefined
+  }
+  children?: SimpleNode[]
+}
+type HeadingNode = {
+  level: number
+  id: string
+  title: string
+  children: HeadingNode[]
+}
+type Link$1 = {
+  href: string
+  title: string
+  links?: Link$1[]
+}
 type NavigationLink = {
   title: string
   href: string
@@ -396,18 +400,6 @@ type SidebarLinkProps = {
   onLinkClick?: React.MouseEventHandler<HTMLAnchorElement>
   depth: number
 }
-type TableOfContentsItem = {
-  id: string
-  children: TableOfContentsItem[]
-  title: string
-}
-type TableOfContentsProps = {
-  tableOfContents: TableOfContentsItem[]
-}
-interface TocContextType {
-  toc: boolean
-  setToc: Dispatch<SetStateAction<boolean>>
-}
 interface BreadcrumbsProps {
   homeLabel?: string
   /**
@@ -436,6 +428,19 @@ interface BreadcrumbsProps {
    */
   demoPath?: string
 }
+type View = 'desktop' | 'tablet' | 'mobile'
+declare const languages: readonly [
+  'bash',
+  'css',
+  'javascript',
+  'js',
+  'json',
+  'jsx',
+  'ts',
+  'tsx',
+  'typescript',
+]
+type Language = (typeof languages)[number]
 type IFrameData = number | IFrameOptions
 interface IFrameOptions {
   height: number
@@ -452,30 +457,17 @@ interface VariantCodeData<V extends Variants> extends BaseCodeData<'variant'> {
   code: CodeVariant<V>
 }
 interface SingleCodeData extends BaseCodeData<'single'> {
-  code: Code
+  code: Code$1
 }
-declare const languages: readonly [
-  'bash',
-  'css',
-  'javascript',
-  'js',
-  'json',
-  'jsx',
-  'ts',
-  'tsx',
-  'typescript',
-]
-type Language = (typeof languages)[number]
 interface CodeItem {
   fileName: string
   language: Language
   code: string
 }
 type Variants = string
-type CodeVariant<V extends Variants> = Record<V, Code>
-type Code = CodeItem | [CodeItem, ...CodeItem[]]
+type CodeVariant<V extends Variants> = Record<V, Code$1>
+type Code$1 = CodeItem | [CodeItem, ...CodeItem[]]
 type CodeData<V extends Variants = Variants> = SingleCodeData | VariantCodeData<V>
-type View = 'desktop' | 'tablet' | 'mobile'
 interface CodeDemoProps {
   data: CodeData
 }
@@ -485,6 +477,46 @@ interface CodeHighlightProps extends React.ComponentProps<'pre'> {
   withCopy?: boolean
 }
 
+declare function BaseColorSwatches({
+  baseColors,
+  format,
+}: {
+  baseColors: string[] | undefined
+  format: Format
+}): react_jsx_runtime.JSX.Element
+
+declare function Breadcrumb({
+  ...props
+}: React$1.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element
+declare function BreadcrumbList({
+  className,
+  ...props
+}: React$1.ComponentProps<'ol'>): react_jsx_runtime.JSX.Element
+declare function BreadcrumbItem({
+  className,
+  ...props
+}: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element
+declare function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React$1.ComponentProps<'a'> & {
+  asChild?: boolean
+}): react_jsx_runtime.JSX.Element
+declare function BreadcrumbPage({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element
+declare function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element
+declare function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element
+
 declare function Breadcrumbs({
   homeLabel,
   pathLabels,
@@ -509,6 +541,7 @@ declare const Link: React__default.ForwardRefExoticComponent<
     onMouseEnter?: React__default.MouseEventHandler<HTMLAnchorElement>
     onTouchStart?: React__default.TouchEventHandler<HTMLAnchorElement>
     onClick?: React__default.MouseEventHandler<HTMLAnchorElement>
+    onNavigate?: (event: { preventDefault: () => void }) => void
   } & Omit<
     React__default.DetailedHTMLProps<
       React__default.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -522,20 +555,18 @@ declare const Link: React__default.ForwardRefExoticComponent<
 declare const buttonVariants: (
   props?:
     | ({
-        variant?:
-          | 'link'
-          | 'primary/neutral'
+        variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | null | undefined
+        color?:
+          | 'primary/grey'
           | 'light'
           | 'primary/white'
           | 'white'
-          | 'neutral'
+          | 'grey'
           | 'primary'
           | 'secondary'
           | 'tertiary'
           | 'accent'
-          | 'outline'
-          | 'ghost'
-          | 'error'
+          | 'danger'
           | null
           | undefined
         size?: 'default' | 'icon' | 'sm' | 'lg' | null | undefined
@@ -630,6 +661,14 @@ declare function ColorCard({
   viewMode,
 }: ColorCardProps): react_jsx_runtime.JSX.Element
 
+declare function ColourScale({ colorsToUse }: ColourScaleProps): react_jsx_runtime.JSX.Element
+
+declare function ColorSwatches({
+  theme,
+  format,
+  viewMode,
+}: ColorSwatchesProps): react_jsx_runtime.JSX.Element
+
 declare function Dialog({
   ...props
 }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element
@@ -894,6 +933,16 @@ interface DynamicFaviconProps {
 }
 declare function DynamicFavicon({ lightModeFavicon, darkModeFavicon }: DynamicFaviconProps): null
 
+declare const ExpandableSearch: React$1.ForwardRefExoticComponent<
+  React$1.HTMLAttributes<HTMLFormElement> & {
+    onAction?: (value: string) => void
+    defaultValue?: string
+  } & React$1.RefAttributes<HTMLFormElement>
+>
+declare const ExpandableSearchField: React$1.ForwardRefExoticComponent<
+  React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>
+>
+
 declare function FooterSocialLink({
   href,
   icon: Icon,
@@ -951,15 +1000,18 @@ declare function FormatToggle({
   setFormat,
 }: FormatToggleProps): react_jsx_runtime.JSX.Element
 
-declare function H1({
-  className,
-  ...props
-}: React$1.ComponentProps<'h1'>): react_jsx_runtime.JSX.Element
-
-declare function H2({
+type HeadingProps = {
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+  trim?: 'normal' | 'start' | 'end' | 'both'
+} & React.ComponentPropsWithoutRef<'h1'>
+declare function Heading({
   className,
+  trim,
+  size,
+  level,
   ...props
-}: React$1.ComponentProps<'h2'>): react_jsx_runtime.JSX.Element
+}: HeadingProps): react_jsx_runtime.JSX.Element
 
 declare function Header({
   sitename,
@@ -1455,6 +1507,21 @@ declare const Social: {
 
 declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element
 
+declare const theme: {
+  size: {
+    xs: string
+    sm: string
+    md: string
+    lg: string
+    xl: string
+  }
+}
+type SpinnerProps = {
+  className?: string
+  size?: keyof typeof theme.size
+} & React$1.HTMLAttributes<HTMLSpanElement>
+declare function Spinner({ className, size, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element
+
 declare function Switch({
   className,
   ...props
@@ -1514,6 +1581,24 @@ declare function TabsContent({
   ...props
 }: React$1.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element
 
+type TextProps = {
+  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+  trim?: 'normal' | 'start' | 'end' | 'both'
+} & React.ComponentPropsWithoutRef<'p'>
+declare function Text({ className, trim, size, ...props }: TextProps): react_jsx_runtime.JSX.Element
+declare function TextLink({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Link>): react_jsx_runtime.JSX.Element
+declare function Strong({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'strong'>): react_jsx_runtime.JSX.Element
+declare function Code({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'code'>): react_jsx_runtime.JSX.Element
+
 declare function Textarea({
   className,
   ...props
@@ -1661,7 +1746,12 @@ declare const getColorValue: (
   },
   colorFormat: 'oklch' | 'rgb' | 'hsl' | 'hex',
 ) => string
+declare const createColorData: (baseColors: string[], format: Format) => (string | null)[]
 
+declare const brand: Record<string, string[]>
+declare const aboriginal: Record<string, string[]>
+declare const semantic: Record<string, string[]>
+declare const allPalettes: Palette[]
 declare const colors: ColorThemes
 declare const colorThemes: ColorThemes
 
@@ -1680,6 +1770,7 @@ export {
   Badge,
   BadgeButton,
   type BaseCodeData,
+  BaseColorSwatches,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -1698,7 +1789,7 @@ export {
   CardHeader,
   CardTitle,
   Checkbox,
-  type Code,
+  Code,
   type CodeData,
   CodeDemo,
   type CodeDemoProps,
@@ -1713,12 +1804,15 @@ export {
   ColorCard,
   type ColorCardProps,
   type ColorData,
-  type ColorFormat,
   type ColorProperty,
+  ColorSwatches,
+  type ColorSwatchesProps,
   type ColorTheme,
   type ColorThemes,
   type ColorsDisplayProps,
   type ColourOutputProps,
+  ColourScale,
+  type ColourScaleProps,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -1743,6 +1837,8 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  type DataType,
+  type DataTypeSelectProps,
   type DesignTokensShades,
   type DesignTokensTheme,
   Dialog,
@@ -1781,6 +1877,8 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   DynamicFavicon,
+  ExpandableSearch,
+  ExpandableSearchField,
   Footer,
   FooterAcknowledgement,
   FooterLegalLinks,
@@ -1790,9 +1888,8 @@ export {
   FormatToggle,
   type FormatToggleProps,
   GenerateInterpolatedColors,
-  H1,
-  H2,
   Header,
+  Heading,
   type HeadingNode,
   type IFrameData,
   type IFrameOptions,
@@ -1840,6 +1937,7 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  type Palette,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -1884,6 +1982,8 @@ export {
   Skeleton,
   Slider,
   Social,
+  Spinner,
+  Strong,
   type StructuredColor,
   Switch,
   Table,
@@ -1901,6 +2001,8 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Text,
+  TextLink,
   Textarea,
   type ThemeCategory,
   type ThemeOption,
@@ -1927,8 +2029,11 @@ export {
   type ViewMode,
   ViewToggle,
   type ViewToggleProps,
+  aboriginal,
   addStartStopToColorArray,
+  allPalettes,
   badgeVariants,
+  brand,
   buttonVariants,
   camelCase,
   cn,
@@ -1937,6 +2042,7 @@ export {
   colorThemes,
   colors,
   createColorArray,
+  createColorData,
   darkenColor,
   domToSimple,
   generateColorThemes,
@@ -1953,6 +2059,7 @@ export {
   oklchConverter,
   renderColorOutput,
   renderColorOutputToDTFM,
+  semantic,
   shades,
   themeIndices,
   themeTokens,