fix(NativeSelect): add bg and text color to option, add fallthroughAttributes (#1580)

* fix(NativeSelect): add bg and text color to option, add fallthroughAttributes

* chore: build registry

Author: sadeghbarati

apps/v4/public/r/index.json

@@ -47,13 +47,13 @@
       "type": "registry:component"
     },
     {
-      "path": "registry/new-york-v4/blocks/dashboard-01/components/DraggableRow.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Row } from \"@tanstack/vue-table\"\nimport type { z } from \"zod\"\nimport type { schema } from \"./DataTable.vue\"\nimport { FlexRender } from \"@tanstack/vue-table\"\nimport { useSortable } from \"dnd-kit-vue\"\nimport {\n  TableCell,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst props = defineProps<{ row: Row<z.infer<typeof schema>>, index: number }>()\n\nconst { elementRef, isDragging } = useSortable({\n  id: props.row.original.id,\n  index: props.index,\n})\n</script>\n\n<template>\n  <TableRow\n    :ref=\"elementRef\"\n    :data-state=\"row.getIsSelected() && 'selected'\"\n    :data-dragging=\"isDragging\"\n    class=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n  >\n    <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n      <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n    </TableCell>\n  </TableRow>\n</template>\n",
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/DragHandle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { IconGripVertical } from \"@tabler/icons-vue\"\nimport { useSortableContext } from \"dnd-kit-vue\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nconst { handleRef, sortable } = useSortableContext()\n</script>\n\n<template>\n  <Button\n    :ref=\"handleRef\"\n    variant=\"ghost\"\n    size=\"icon\"\n    class=\"text-muted-foreground size-7 hover:bg-transparent\"\n  >\n    <IconGripVertical class=\"text-muted-foreground size-3\" />\n    <span class=\"sr-only\">Drag to reorder</span>\n  </Button>\n</template>\n",
       "type": "registry:component"
     },
     {
-      "path": "registry/new-york-v4/blocks/dashboard-01/components/DragHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { IconGripVertical } from \"@tabler/icons-vue\"\nimport { useSortableContext } from \"dnd-kit-vue\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nconst { handleRef, sortable } = useSortableContext()\n</script>\n\n<template>\n  <Button\n    :ref=\"handleRef\"\n    variant=\"ghost\"\n    size=\"icon\"\n    class=\"text-muted-foreground size-7 hover:bg-transparent\"\n  >\n    <IconGripVertical class=\"text-muted-foreground size-3\" />\n    <span class=\"sr-only\">Drag to reorder</span>\n  </Button>\n</template>\n",
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/DraggableRow.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Row } from \"@tanstack/vue-table\"\nimport type { z } from \"zod\"\nimport type { schema } from \"./DataTable.vue\"\nimport { FlexRender } from \"@tanstack/vue-table\"\nimport { useSortable } from \"dnd-kit-vue\"\nimport {\n  TableCell,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst props = defineProps<{ row: Row<z.infer<typeof schema>>, index: number }>()\n\nconst { elementRef, isDragging } = useSortable({\n  id: props.row.original.id,\n  index: props.index,\n})\n</script>\n\n<template>\n  <TableRow\n    :ref=\"elementRef\"\n    :data-state=\"row.getIsSelected() && 'selected'\"\n    :data-dragging=\"isDragging\"\n    class=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n  >\n    <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n      <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n    </TableCell>\n  </TableRow>\n</template>\n",
       "type": "registry:component"
     },
     {

apps/v4/public/r/styles/new-york-v4/dashboard-01.json

@@ -8,11 +8,6 @@
     "textarea"
   ],
   "files": [
-    {
-      "path": "registry/new-york-v4/ui/input-group/index.ts",
-      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/registry/new-york-v4/ui/button\"\nimport { cva } from \"class-variance-authority\"\n\nexport { default as InputGroup } from \"./InputGroup.vue\"\nexport { default as InputGroupAddon } from \"./InputGroupAddon.vue\"\nexport { default as InputGroupButton } from \"./InputGroupButton.vue\"\nexport { default as InputGroupInput } from \"./InputGroupInput.vue\"\nexport { default as InputGroupText } from \"./InputGroupText.vue\"\nexport { default as InputGroupTextarea } from \"./InputGroupTextarea.vue\"\n\nexport const inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n)\n\nexport type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>\n\nexport const inputGroupButtonVariants = cva(\n  \"text-sm shadow-none flex gap-2 items-center\",\n  {\n    variants: {\n      size: {\n        \"xs\": \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n        \"sm\": \"h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] 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)\n\nexport type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>\n\nexport interface InputGroupButtonProps {\n  variant?: ButtonVariants[\"variant\"]\n  size?: InputGroupButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}\n",
-      "type": "registry:ui"
-    },
     {
       "path": "registry/new-york-v4/ui/input-group/InputGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"input-group\"\n    role=\"group\"\n    :class=\"cn(\n      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',\n      'h-9 min-w-0 has-[>textarea]:h-auto',\n\n      // Variants based on alignment.\n      'has-[>[data-align=inline-start]]:[&>input]:pl-2',\n      'has-[>[data-align=inline-end]]:[&>input]:pr-2',\n      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',\n      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',\n\n      // Focus state.\n      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',\n\n      // Error state.\n      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',\n\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
@@ -42,6 +37,11 @@
       "path": "registry/new-york-v4/ui/input-group/InputGroupTextarea.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Textarea\n    data-slot=\"input-group-control\"\n    :class=\"cn(\n      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',\n      props.class,\n    )\"\n  />\n</template>\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "registry/new-york-v4/ui/input-group/index.ts",
+      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/registry/new-york-v4/ui/button\"\nimport { cva } from \"class-variance-authority\"\n\nexport { default as InputGroup } from \"./InputGroup.vue\"\nexport { default as InputGroupAddon } from \"./InputGroupAddon.vue\"\nexport { default as InputGroupButton } from \"./InputGroupButton.vue\"\nexport { default as InputGroupInput } from \"./InputGroupInput.vue\"\nexport { default as InputGroupText } from \"./InputGroupText.vue\"\nexport { default as InputGroupTextarea } from \"./InputGroupTextarea.vue\"\n\nexport const inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n)\n\nexport type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>\n\nexport const inputGroupButtonVariants = cva(\n  \"text-sm shadow-none flex gap-2 items-center\",\n  {\n    variants: {\n      size: {\n        \"xs\": \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n        \"sm\": \"h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] 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)\n\nexport type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>\n\nexport interface InputGroupButtonProps {\n  variant?: ButtonVariants[\"variant\"]\n  size?: InputGroupButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}\n",
+      "type": "registry:ui"
     }
   ]
 }

apps/v4/public/r/styles/new-york-v4/input-group.json

@@ -8,11 +8,6 @@
     "reka-ui"
   ],
   "files": [
-    {
-      "path": "registry/new-york-v4/ui/input-otp/index.ts",
-      "content": "export { default as InputOTP } from \"./InputOTP.vue\"\nexport { default as InputOTPGroup } from \"./InputOTPGroup.vue\"\nexport { default as InputOTPSeparator } from \"./InputOTPSeparator.vue\"\nexport { default as InputOTPSlot } from \"./InputOTPSlot.vue\"\n",
-      "type": "registry:ui"
-    },
     {
       "path": "registry/new-york-v4/ui/input-otp/InputOTP.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { OTPInputEmits, OTPInputProps } from \"vue-input-otp\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { useForwardPropsEmits } from \"reka-ui\"\nimport { OTPInput } from \"vue-input-otp\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<OTPInputProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst emits = defineEmits<OTPInputEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <OTPInput\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :container-class=\"cn('flex items-center gap-2 has-disabled:opacity-50', props.class)\"\n    data-slot=\"input-otp\"\n    class=\"disabled:cursor-not-allowed\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </OTPInput>\n</template>\n",
@@ -32,6 +27,11 @@
       "path": "registry/new-york-v4/ui/input-otp/InputOTPSlot.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { useForwardProps } from \"reka-ui\"\nimport { computed } from \"vue\"\nimport { useVueOTPContext } from \"vue-input-otp\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{ index: number, class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardProps(delegatedProps)\n\nconst context = useVueOTPContext()\n\nconst slot = computed(() => context?.value.slots[props.index])\n</script>\n\n<template>\n  <div\n    v-bind=\"forwarded\"\n    data-slot=\"input-otp-slot\"\n    :data-active=\"slot?.isActive\"\n    :class=\"cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)\"\n  >\n    {{ slot?.char }}\n    <div v-if=\"slot?.hasFakeCaret\" class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n      <div class=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "registry/new-york-v4/ui/input-otp/index.ts",
+      "content": "export { default as InputOTP } from \"./InputOTP.vue\"\nexport { default as InputOTPGroup } from \"./InputOTPGroup.vue\"\nexport { default as InputOTPSeparator } from \"./InputOTPSeparator.vue\"\nexport { default as InputOTPSlot } from \"./InputOTPSlot.vue\"\n",
+      "type": "registry:ui"
     }
   ]
 }

apps/v4/public/r/styles/new-york-v4/input-otp.json

@@ -7,13 +7,13 @@
   ],
   "files": [
     {
-      "path": "registry/new-york-v4/ui/input/index.ts",
-      "content": "export { default as Input } from \"./Input.vue\"\n",
+      "path": "registry/new-york-v4/ui/input/Input.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { useVModel } from \"@vueuse/core\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes[\"class\"]\n}>()\n\nconst emits = defineEmits<{\n  (e: \"update:modelValue\", payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, \"modelValue\", emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input\n    v-model=\"modelValue\"\n    data-slot=\"input\"\n    :class=\"cn(\n      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n      props.class,\n    )\"\n  >\n</template>\n",
       "type": "registry:ui"
     },
     {
-      "path": "registry/new-york-v4/ui/input/Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { useVModel } from \"@vueuse/core\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes[\"class\"]\n}>()\n\nconst emits = defineEmits<{\n  (e: \"update:modelValue\", payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, \"modelValue\", emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input\n    v-model=\"modelValue\"\n    data-slot=\"input\"\n    :class=\"cn(\n      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n      props.class,\n    )\"\n  >\n</template>\n",
+      "path": "registry/new-york-v4/ui/input/index.ts",
+      "content": "export { default as Input } from \"./Input.vue\"\n",
       "type": "registry:ui"
     }
   ]