@coston/ui 0.2.2 → 0.3.0

package/README.md

@@ -118,6 +118,7 @@ Install only what you use.
 | Input           | `@coston/ui/input`           |
 | Label           | `@coston/ui/label`           |
 | Menubar         | `@coston/ui/menubar`         |
+| Native Select   | `@coston/ui/native-select`   |
 | Navigation Menu | `@coston/ui/navigation-menu` |
 | Pagination      | `@coston/ui/pagination`      |
 | Popover         | `@coston/ui/popover`         |

package/dist/components/native-select.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types3 from "class-variance-authority/types";
+
+//#region src/components/native-select.d.ts
+declare const nativeSelectVariants: (props?: ({
+  size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types3.ClassProp) | undefined) => string;
+interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, VariantProps<typeof nativeSelectVariants> {}
+declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLSelectElement>>;
+//#endregion
+export { NativeSelect, NativeSelectProps, nativeSelectVariants };
+//# sourceMappingURL=native-select.d.ts.map

package/dist/components/native-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.d.ts","names":[],"sources":["../../src/components/native-select.tsx"],"sourcesContent":[],"mappings":";;;;;cAaM;;IAaL,+BAAA,CAAA;AAbK,UAeW,iBAAA,SAEb,IAJH,CAIQ,KAAA,CAAM,oBAJd,CAImC,iBAJnC,CAAA,EAAA,MAAA,CAAA,EAKG,YALH,CAAA,OAKuB,oBALvB,CAAA,CAAA,CAED;cAOM,YANJ,EAMgB,KAAA,CAAA,yBANhB,CAMgB,iBANhB,GAMgB,KAAA,CAAA,aANhB,CAMgB,iBANhB,CAAA,CAAA"}

package/dist/components/native-select.js

@@ -0,0 +1,31 @@
+import { cn } from "../utils-CyPJ3VV3.js";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/components/native-select.tsx
+const nativeSelectVariants = cva("w-full appearance-none rounded-md border border-input bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
+	variants: { size: {
+		default: "h-10 pl-3 pr-8 text-sm",
+		sm: "h-8 pl-2.5 pr-7 text-xs"
+	} },
+	defaultVariants: { size: "default" }
+});
+const NativeSelect = React.forwardRef(({ className, size, children,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	className: cn("relative w-full", className),
+	children: [/* @__PURE__ */ jsx("select", {
+		ref,
+		className: nativeSelectVariants({ size }),
+		...props,
+		children
+	}), /* @__PURE__ */ jsx(ChevronDown, {
+		"aria-hidden": "true",
+		className: cn("pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 opacity-50", size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4")
+	})]
+}));
+NativeSelect.displayName = "NativeSelect";
+
+//#endregion
+export { NativeSelect, nativeSelectVariants };
+//# sourceMappingURL=native-select.js.map

package/dist/components/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.js","names":[],"sources":["../../src/components/native-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { cn } from '../lib/utils';\n\n// A styled wrapper around the platform `<select>`. Unlike the Radix-based\n// `Select`, this submits its value through native form submission (no client\n// JS, no controlled state), which makes it the right fit for server-action\n// forms and simple value pickers. Reach for `Select` when you need rich,\n// custom-rendered options. Height/text come from the `size` variant — never\n// add vertical padding, the control centers its text natively, so a fixed\n// `py-*` clips the label at smaller heights.\nconst nativeSelectVariants = cva(\n  'w-full appearance-none rounded-md border border-input bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        default: 'h-10 pl-3 pr-8 text-sm',\n        sm: 'h-8 pl-2.5 pr-7 text-xs',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\nexport interface NativeSelectProps\n  extends\n    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>,\n    VariantProps<typeof nativeSelectVariants> {}\n\n// `className` targets the wrapper (layout/width/margins) so the chevron always\n// aligns to the control's edge; `size` styles the select itself.\nconst NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(\n  ({ className, size, children, ...props }, ref) => (\n    <div className={cn('relative w-full', className)}>\n      <select ref={ref} className={nativeSelectVariants({ size })} {...props}>\n        {children}\n      </select>\n      <ChevronDown\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 opacity-50',\n          size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'\n        )}\n      />\n    </div>\n  )\n);\nNativeSelect.displayName = 'NativeSelect';\n\nexport { NativeSelect, nativeSelectVariants };\n"],"mappings":";;;;;;;AAaA,MAAM,uBAAuB,IAC3B,oQACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,IAAI;CACL,EACF;CACD,iBAAiB,EACf,MAAM,UACP;AACF,EACF;AASD,MAAM,eAAe,MAAM,WACzB,CAAC,EAAE,WAAW,MAAM,SAAU,GAAG,OAAO,EAAE,wBACxC,KAAC;CAAI,WAAW,GAAG,mBAAmB,UAAU;4BAC9C,IAAC;EAAY;EAAK,WAAW,qBAAqB,EAAE,KAAM,EAAC;EAAE,GAAI;EAC9D;GACM,kBACT,IAAC;EACC,eAAY;EACZ,WAAW,GACT,4EACA,SAAS,OAAO,gBAAgB,UACjC;GACD;EACE,CAET;AACD,aAAa,cAAc"}

package/dist/components/navigation-menu.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import * as class_variance_authority_types3 from "class-variance-authority/types";
+import * as class_variance_authority_types4 from "class-variance-authority/types";
 
 //#region src/components/navigation-menu.d.ts
 declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
 declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
-declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types3.ClassProp | undefined) => string;
+declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types4.ClassProp | undefined) => string;
 declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/sheet.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as react_jsx_runtime23 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import * as class_variance_authority_types4 from "class-variance-authority/types";
+import * as class_variance_authority_types5 from "class-variance-authority/types";
 
 //#region src/components/sheet.d.ts
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
@@ -12,7 +12,7 @@ declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
   side?: "top" | "right" | "bottom" | "left" | null | undefined;
-} & class_variance_authority_types4.ClassProp) | undefined) => string;
+} & class_variance_authority_types5.ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {}
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {

package/dist/components/toggle-group.d.ts

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import * as class_variance_authority_types5 from "class-variance-authority/types";
+import * as class_variance_authority_types6 from "class-variance-authority/types";
 
 //#region src/components/toggle-group.d.ts
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "default" | "sm" | "lg" | null | undefined;
-} & class_variance_authority_types5.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
+} & class_variance_authority_types6.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "default" | "sm" | "lg" | null | undefined;
-} & class_variance_authority_types5.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+} & class_variance_authority_types6.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/toggle.d.ts

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import * as class_variance_authority_types7 from "class-variance-authority/types";
+import * as class_variance_authority_types8 from "class-variance-authority/types";
 
 //#region src/components/toggle.d.ts
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "default" | "sm" | "lg" | null | undefined;
-} & class_variance_authority_types7.ClassProp) | undefined) => string;
+} & class_variance_authority_types8.ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "default" | "sm" | "lg" | null | undefined;
-} & class_variance_authority_types7.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+} & class_variance_authority_types8.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.ts.map

package/llms.txt

@@ -145,6 +145,10 @@ Exports: Label
 Import: `@coston/ui/menubar`
 Exports: Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarShortcut
 
+### native-select
+Import: `@coston/ui/native-select`
+Exports: NativeSelect, nativeSelectVariants
+
 ### navigation-menu
 Import: `@coston/ui/navigation-menu`
 Exports: navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coston/ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "React UI component library built on Radix UI and Tailwind CSS",
   "type": "module",
   "sideEffects": false,