{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-select",
  "type": "registry:ui",
  "title": "Native Select",
  "description": "Native select with custom chevron for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/native-select/native-select.tsx",
      "type": "registry:ui",
      "target": "components/ui/native-select/native-select.tsx",
      "content": "import React, { useState } from 'react';\nimport { getNativeSelectState, nativeSelectStyleKeys } from '../lib/core';\nimport type { NativeSelectBaseProps, NativeSelectOptionBaseProps, NativeSelectOptGroupBaseProps } from '../lib/core';\nimport styles from './native-select.module.scss';\n\nexport interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'value' | 'defaultValue'>, NativeSelectBaseProps {\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n}\n\nconst NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(\n\t({ className = '', size = 'default', value, defaultValue = '', onValueChange, onChange, children, ...props }, ref) => {\n\t\tconst [internalValue, setInternalValue] = useState(defaultValue);\n\t\tconst currentValue = value !== undefined ? value : internalValue;\n\t\tconst state = getNativeSelectState(currentValue);\n\n\t\tfunction handleChange(event: React.ChangeEvent<HTMLSelectElement>) {\n\t\t\tconst next = event.target.value;\n\n\t\t\tif (value === undefined) {\n\t\t\t\tsetInternalValue(next);\n\t\t\t}\n\n\t\t\tonValueChange?.(next);\n\t\t\tonChange?.(event);\n\t\t}\n\n\t\treturn (\n\t\t\t<div className={styles[nativeSelectStyleKeys.wrapper]}>\n\t\t\t\t<select\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"native-select\"\n\t\t\t\t\tdata-size={size}\n\t\t\t\t\tdata-state={state}\n\t\t\t\t\tvalue={currentValue}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tclassName={`${styles[nativeSelectStyleKeys.select]} ${className}`}\n\t\t\t\t\t{...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tclassName={styles[nativeSelectStyleKeys.icon]}\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"native-select-icon\">\n\t\t\t\t\t<path d=\"m6 9 6 6 6-6\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t},\n);\nNativeSelect.displayName = 'NativeSelect';\n\nexport interface NativeSelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement>, NativeSelectOptionBaseProps {}\n\nconst NativeSelectOption = React.forwardRef<HTMLOptionElement, NativeSelectOptionProps>(({ className = '', ...props }, ref) => {\n\treturn <option ref={ref} data-slot=\"native-select-option\" className={`${styles[nativeSelectStyleKeys.option]} ${className}`} {...props} />;\n});\nNativeSelectOption.displayName = 'NativeSelectOption';\n\nexport interface NativeSelectOptGroupProps extends React.OptgroupHTMLAttributes<HTMLOptGroupElement>, NativeSelectOptGroupBaseProps {}\n\nconst NativeSelectOptGroup = React.forwardRef<HTMLOptGroupElement, NativeSelectOptGroupProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<optgroup ref={ref} data-slot=\"native-select-optgroup\" className={`${styles[nativeSelectStyleKeys.optGroup]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</optgroup>\n\t);\n});\nNativeSelectOptGroup.displayName = 'NativeSelectOptGroup';\n\nexport { NativeSelect, NativeSelectOption, NativeSelectOptGroup };\nexport default NativeSelect;\n"
    },
    {
      "path": "packages/styles/scss/components/native-select.module.scss",
      "type": "registry:file",
      "target": "components/ui/native-select/native-select.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.wrapper {\n\tposition: relative;\n\twidth: fit-content;\n\tcolor: $foreground;\n\n\t&:has(select:disabled) {\n\t\topacity: 0.5;\n\t}\n}\n\n.select {\n\tappearance: none;\n\twidth: 100%;\n\tmin-width: 0;\n\theight: var(--tile-native-select-height, 2.25rem);\n\tborder-radius: var(--tile-native-select-radius, #{$radius});\n\tborder: var(--tile-native-select-border-width, 1px) solid var(--tile-native-select-border, #{$input});\n\tbackground-color: var(--tile-native-select-background, #{$background});\n\tpadding: var(--tile-native-select-padding, #{$spacing-2} 2.25rem #{$spacing-2} #{$spacing-3});\n\tfont-size: var(--tile-native-select-font-size, #{$text-sm});\n\tline-height: var(--tile-native-select-line-height, inherit);\n\tcolor: $foreground;\n\tbox-shadow: var(--tile-native-select-shadow, #{$shadow-sm});\n\ttransition:\n\t\tborder-color $transition-fast,\n\t\tbox-shadow $transition-fast;\n\toutline: none;\n\tcursor: pointer;\n\n\t&::placeholder {\n\t\tcolor: $muted-foreground;\n\t}\n\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--tile-native-select-hover-background, #{$field-hover});\n\t}\n\n\t&:focus-visible {\n\t\tborder-color: var(--tile-native-select-focus-border, #{$ring});\n\t\tbox-shadow: var(--tile-native-select-focus-shadow, 0 0 0 3px color-mix(in srgb, #{$ring} 50%, transparent));\n\t}\n\n\t&:disabled {\n\t\tpointer-events: none;\n\t\tcursor: not-allowed;\n\t}\n\n\t&[data-size='sm'] {\n\t\theight: var(--tile-native-select-sm-height, 2rem);\n\t\tfont-size: var(--tile-native-select-sm-font-size, #{$text-sm});\n\t\tborder-radius: var(--tile-native-select-sm-radius, #{$radius});\n\t\tpadding-top: $spacing-1;\n\t\tpadding-bottom: $spacing-1;\n\t}\n\n\t&[data-state='empty'] {\n\t\tcolor: $muted-foreground;\n\t}\n\n\t&[aria-invalid='true'] {\n\t\tborder-color: $destructive;\n\t\tbox-shadow: var(--tile-native-select-error-shadow, #{$shadow-sm});\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: var(--tile-native-select-error-focus-shadow, 0 0 0 3px color-mix(in srgb, #{$destructive} 20%, transparent));\n\t\t}\n\t}\n}\n\n.icon {\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\tright: 0.875rem;\n\ttransform: translateY(-50%);\n\twidth: 1rem;\n\theight: 1rem;\n\tcolor: $muted-foreground;\n\topacity: 0.5;\n\tuser-select: none;\n}\n\n.option {\n\tbackground-color: Canvas;\n\tcolor: CanvasText;\n}\n\n.optGroup {\n\tbackground-color: Canvas;\n\tcolor: CanvasText;\n}\n"
    },
    {
      "path": "packages/react/src/components/native-select/index.ts",
      "type": "registry:ui",
      "target": "components/ui/native-select/index.ts",
      "content": "export { NativeSelect, NativeSelectOption, NativeSelectOptGroup, type NativeSelectProps, type NativeSelectOptionProps, type NativeSelectOptGroupProps } from './native-select';\n"
    }
  ]
}