@undp/design-system-react/dist/InputGroup.cjs.map

React based design system for UNDP

{"version":3,"file":"InputGroup.cjs","names":[],"sources":["../src/components/ui/input-group.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex w-full min-w-0 items-stretch outline-none transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col  has-[[data-slot][aria-invalid=true]]:border-error has-disabled:bg-background/50 has-disabled:opacity-disabled has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-error/20 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n  {\n    variants: {\n      variant: {\n        light: 'border border-stroke',\n        normal: 'border-2 border-foreground',\n      },\n      rounded: {\n        base: 'rounded',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'normal',\n      rounded: 'base',\n    },\n  },\n);\n\nfunction InputGroup({\n  className,\n  variant,\n  rounded,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: This come from shadcn ui\n    <div\n      data-slot='input-group'\n      role='group'\n      className={cn(inputGroupVariants({ variant, rounded }), className)}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        transparent: 'bg-transparent text-content-secondary',\n        surface: 'bg-surface text-content-secondary',\n        'surface-hard': 'bg-surface-hard text-content-secondary',\n        background: 'bg-background text-content-secondary',\n        'background-soft': 'bg-background-soft text-content-secondary',\n        foreground: 'bg-foreground text-content-reverse',\n        'foreground-soft': 'bg-foreground-soft text-content-reverse',\n        error: 'bg-error text-content-reverse',\n        warning: 'bg-warning text-content-primary',\n        info: 'bg-info text-content-reverse',\n        success: 'bg-success text-content-reverse',\n      },\n      align: {\n        'inline-start': 'order-first px-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',\n        'inline-end': 'order-last px-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',\n        'block-start':\n          'order-first w-full justify-start p-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',\n        'block-end':\n          'order-last w-full justify-start p-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'background',\n        align: 'inline-start',\n        class: 'border-r border-stroke',\n      },\n      {\n        variant: 'background',\n        align: 'inline-end',\n        class: 'border-l border-stroke',\n      },\n      {\n        variant: 'background',\n        align: 'block-start',\n        class: 'border-b border-stroke',\n      },\n      {\n        variant: 'background',\n        align: 'block-end',\n        class: 'border-t border-stroke',\n      },\n    ],\n    defaultVariants: {\n      align: 'inline-start',\n      variant: 'surface',\n    },\n  },\n);\n\nfunction InputGroupAddon({\n  className,\n  align,\n  variant,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    // biome-ignore lint/a11y/useKeyWithClickEvents: This come from shadcn ui\n    // biome-ignore lint/a11y/useSemanticElements: This come from shadcn ui\n    <div\n      role='group'\n      data-slot='input-group-addon'\n      data-align={align}\n      data-variant={variant}\n      className={cn(inputGroupAddonVariants({ align, variant }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'icon',\n  size = 'xs',\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size'> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupTextVariants = cva(\n  \"flex items-center gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        primary: 'text-content-primary',\n        secondary: 'text-content-secondary',\n        tertiary: 'text-content-tertiary',\n        quaternary: 'text-content-quaternary',\n        reverse: 'text-content-reverse',\n        placeholder: 'text-content-placeholder',\n        error: 'text-error',\n        warning: 'text-warning',\n        info: 'text-info',\n        success: 'text-success',\n      },\n    },\n    defaultVariants: {\n      variant: 'tertiary',\n    },\n  },\n);\nfunction InputGroupText({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof inputGroupTextVariants>) {\n  return <span className={cn(inputGroupTextVariants({ variant }), className)} {...props} />;\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <Input\n      data-slot='input-group-control'\n      className={cn(\n        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n  return (\n    <Textarea\n      data-slot='input-group-control'\n      className={cn(\n        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n};\n"],"mappings":"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"}