@stackshift-ui/select 6.0.12 → 7.0.0-beta.1

package/dist/chunk-PPOLDV3F.mjs

@@ -0,0 +1 @@
+import*as e from"@radix-ui/react-select";import{Check as x,ChevronDown as f,ChevronUp as I}from"lucide-react";import*as n from"react";import{cn as l,DefaultComponent as c,useStackShiftUIComponents as s}from"@stackshift-ui/system";import{jsx as i,jsxs as p}from"react/jsx-runtime";var d="Select",u="SelectTrigger",S="SelectValue",R="SelectContent",y="SelectItem",P="SelectGroup",v="SelectLabel",g="SelectSeparator",C="SelectScrollUpButton",h="SelectScrollDownButton",B=n.forwardRef(({...o},a)=>{let{[d]:t=c}=s();return i(t,{as:e.Root,ref:a,...o})});B.displayName=d;var E=n.forwardRef(({className:o,...a},t)=>{let{[P]:r=c}=s();return i(r,{as:e.Group,ref:t,className:l("p-1",o),...a})});E.displayName=P;var W=n.forwardRef(({className:o,...a},t)=>{let{[S]:r=c}=s();return i(r,{as:e.Value,ref:t,className:l("text-sm outline-none",o),...a})});W.displayName=S;var D=n.forwardRef(({className:o,children:a,...t},r)=>{let{[u]:m=c}=s();return p(m,{as:e.Trigger,ref:r,className:l("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",o),...t,children:[a,i(e.Icon,{asChild:!0,children:i(f,{className:"h-4 w-4 opacity-50"})})]})});D.displayName=u;var w=n.forwardRef(({className:o,...a},t)=>{let{[C]:r=c}=s();return i(r,{as:e.ScrollUpButton,ref:t,className:l("flex cursor-default items-center justify-center py-1",o),...a,children:i(I,{className:"h-4 w-4"})})});w.displayName=C;var N=n.forwardRef(({className:o,...a},t)=>{let{[h]:r=c}=s();return i(r,{as:e.ScrollDownButton,ref:t,className:l("flex cursor-default items-center justify-center py-1",o),...a,children:i(f,{className:"h-4 w-4"})})});N.displayName=h;var T=n.forwardRef(({className:o,children:a,position:t="popper",...r},m)=>{let{[R]:b=c}=s();return i(e.Portal,{children:p(b,{as:e.Content,ref:m,className:l("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",t==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",o),position:t,...r,children:[i(w,{}),i(e.Viewport,{className:l("p-1",t==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:a}),i(N,{})]})})});T.displayName=R;var U=n.forwardRef(({className:o,...a},t)=>{let{[v]:r=c}=s();return i(r,{as:e.Label,ref:t,className:l("py-1.5 pl-8 pr-2 text-sm font-semibold",o),...a})});U.displayName=v;var V=n.forwardRef(({className:o,children:a,...t},r)=>{let{[y]:m=c}=s();return p(m,{as:e.Item,ref:r,className:l("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",o),...t,children:[i("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:i(e.ItemIndicator,{children:i(x,{className:"h-4 w-4"})})}),i(e.ItemText,{children:a})]})});V.displayName=y;var G=n.forwardRef(({className:o,...a},t)=>{let{[g]:r=c}=s();return i(r,{as:e.Separator,ref:t,className:l("-mx-1 my-1 h-px bg-muted",o),...a})});G.displayName=g;export{B as a,E as b,W as c,D as d,w as e,N as f,T as g,U as h,V as i,G as j};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var L=Object.create;var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},y=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!E.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(o=P(t,r))||o.enumerable});return e};var M=(e,t,a)=>(a=e!=null?L(k(e)):{},y(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>y(l({},"__esModule",{value:!0}),e);var w={};H(w,{Select:()=>f});module.exports=q(w);var s=require("@stackshift-ui/system"),b=M(require("classnames")),n=require("react/jsx-runtime"),p="Select",f=({defaultValue:e,variant:t="primary",label:a,labelClass:o,onChange:r,required:S=!1,name:i,items:c,ariaLabel:F,noLabel:C=!1,children:$,className:h,as:N="select",...T})=>{var u;let{[p]:V=s.DefaultComponent}=(0,s.useStackShiftUIComponents)(),d="w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none",g=`${d}`,v=`${d} border border-solid border-primary-foreground`,x=(u={primary:g,outline:v}[t])!=null?u:g;return(0,n.jsxs)(n.Fragment,{children:[!C&&(0,n.jsx)("label",{htmlFor:i,className:o,children:a||i}),(0,n.jsx)(V,{onChange:r,name:i,defaultValue:e,required:S,as:N,className:(0,b.default)(x,h),...T,"data-testid":p,children:c&&c.length>0&&c.map(m=>(0,n.jsx)("option",{value:m,children:m},m))})]})};f.displayName=p;0&&(module.exports={Select});
+"use strict";var V=Object.create;var m=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var z=(e,o)=>{for(var a in o)m(e,a,{get:o[a],enumerable:!0})},d=(e,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of L(o))!j.call(e,l)&&l!==a&&m(e,l,{get:()=>o[l],enumerable:!(n=G(o,l))||n.enumerable});return e};var u=(e,o,a)=>(a=e!=null?V(k(e)):{},d(o||!e||!e.__esModule?m(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>d(m({},"__esModule",{value:!0}),e);var A={};z(A,{Select:()=>x,SelectContent:()=>E,SelectGroup:()=>b,SelectItem:()=>D,SelectLabel:()=>W,SelectScrollDownButton:()=>f,SelectScrollUpButton:()=>p,SelectSeparator:()=>T,SelectTrigger:()=>B,SelectValue:()=>I});module.exports=q(A);var r=u(require("@radix-ui/react-select")),s=require("lucide-react"),c=u(require("react")),t=require("@stackshift-ui/system"),i=require("react/jsx-runtime"),S="Select",R="SelectTrigger",y="SelectValue",P="SelectContent",v="SelectItem",g="SelectGroup",C="SelectLabel",h="SelectSeparator",w="SelectScrollUpButton",N="SelectScrollDownButton",x=c.forwardRef(({...e},o)=>{let{[S]:a=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(a,{as:r.Root,ref:o,...e})});x.displayName=S;var b=c.forwardRef(({className:e,...o},a)=>{let{[g]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(n,{as:r.Group,ref:a,className:(0,t.cn)("p-1",e),...o})});b.displayName=g;var I=c.forwardRef(({className:e,...o},a)=>{let{[y]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(n,{as:r.Value,ref:a,className:(0,t.cn)("text-sm outline-none",e),...o})});I.displayName=y;var B=c.forwardRef(({className:e,children:o,...a},n)=>{let{[R]:l=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsxs)(l,{as:r.Trigger,ref:n,className:(0,t.cn)("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",e),...a,children:[o,(0,i.jsx)(r.Icon,{asChild:!0,children:(0,i.jsx)(s.ChevronDown,{className:"h-4 w-4 opacity-50"})})]})});B.displayName=R;var p=c.forwardRef(({className:e,...o},a)=>{let{[w]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(n,{as:r.ScrollUpButton,ref:a,className:(0,t.cn)("flex cursor-default items-center justify-center py-1",e),...o,children:(0,i.jsx)(s.ChevronUp,{className:"h-4 w-4"})})});p.displayName=w;var f=c.forwardRef(({className:e,...o},a)=>{let{[N]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(n,{as:r.ScrollDownButton,ref:a,className:(0,t.cn)("flex cursor-default items-center justify-center py-1",e),...o,children:(0,i.jsx)(s.ChevronDown,{className:"h-4 w-4"})})});f.displayName=N;var E=c.forwardRef(({className:e,children:o,position:a="popper",...n},l)=>{let{[P]:U=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(r.Portal,{children:(0,i.jsxs)(U,{as:r.Content,ref:l,className:(0,t.cn)("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",a==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:a,...n,children:[(0,i.jsx)(p,{}),(0,i.jsx)(r.Viewport,{className:(0,t.cn)("p-1",a==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:o}),(0,i.jsx)(f,{})]})})});E.displayName=P;var W=c.forwardRef(({className:e,...o},a)=>{let{[C]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(n,{as:r.Label,ref:a,className:(0,t.cn)("py-1.5 pl-8 pr-2 text-sm font-semibold",e),...o})});W.displayName=C;var D=c.forwardRef(({className:e,children:o,...a},n)=>{let{[v]:l=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsxs)(l,{as:r.Item,ref:n,className:(0,t.cn)("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",e),...a,children:[(0,i.jsx)("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:(0,i.jsx)(r.ItemIndicator,{children:(0,i.jsx)(s.Check,{className:"h-4 w-4"})})}),(0,i.jsx)(r.ItemText,{children:o})]})});D.displayName=v;var T=c.forwardRef(({className:e,...o},a)=>{let{[h]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,i.jsx)(n,{as:r.Separator,ref:a,className:(0,t.cn)("-mx-1 my-1 h-px bg-muted",e),...o})});T.displayName=h;0&&(module.exports={Select,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectScrollDownButton,SelectScrollUpButton,SelectSeparator,SelectTrigger,SelectValue});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-VCJRWWZ5.mjs";export{e as Select};
+"use strict";import{a as e,b as o,c as r,d as t,e as c,f,g as i,h as l,i as m,j as n}from"./chunk-PPOLDV3F.mjs";export{e as Select,i as SelectContent,o as SelectGroup,m as SelectItem,l as SelectLabel,f as SelectScrollDownButton,c as SelectScrollUpButton,n as SelectSeparator,t as SelectTrigger,r as SelectValue};

package/dist/select.d.ts

@@ -1,20 +1,15 @@
-import type { ElementType, HTMLProps, ReactNode } from "react";
-type Variant = "primary" | "outline";
-export interface SelectProps extends Omit<HTMLProps<HTMLSelectElement>, "as"> {
-    defaultValue?: string;
-    variant?: Variant;
-    label?: string;
-    labelClass?: string;
-    onChange?: () => void;
-    required?: boolean;
-    name: string;
-    items: string[];
-    ariaLabel: string;
-    noLabel?: boolean;
-    [key: string]: any;
-    children?: ReactNode;
-    className?: string;
-    as?: ElementType;
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+interface SelectProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
 }
-export declare const Select: React.FC<SelectProps>;
-export {};
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<never>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/select.js

@@ -1 +1 @@
-"use strict";var x=Object.create;var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!E.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(o=P(t,r))||o.enumerable});return e};var M=(e,t,a)=>(a=e!=null?x(k(e)):{},u(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>u(l({},"__esModule",{value:!0}),e);var w={};H(w,{Select:()=>f});module.exports=q(w);var s=require("@stackshift-ui/system"),b=M(require("classnames")),n=require("react/jsx-runtime"),p="Select",f=({defaultValue:e,variant:t="primary",label:a,labelClass:o,onChange:r,required:S=!1,name:i,items:c,ariaLabel:F,noLabel:C=!1,children:$,className:h,as:N="select",...T})=>{var y;let{[p]:V=s.DefaultComponent}=(0,s.useStackShiftUIComponents)(),d="w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none",g=`${d}`,v=`${d} border border-solid border-primary-foreground`,L=(y={primary:g,outline:v}[t])!=null?y:g;return(0,n.jsxs)(n.Fragment,{children:[!C&&(0,n.jsx)("label",{htmlFor:i,className:o,children:a||i}),(0,n.jsx)(V,{onChange:r,name:i,defaultValue:e,required:S,as:N,className:(0,b.default)(L,h),...T,"data-testid":p,children:c&&c.length>0&&c.map(m=>(0,n.jsx)("option",{value:m,children:m},m))})]})};f.displayName=p;0&&(module.exports={Select});
+"use strict";var V=Object.create;var m=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var z=(e,o)=>{for(var a in o)m(e,a,{get:o[a],enumerable:!0})},d=(e,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of L(o))!j.call(e,l)&&l!==a&&m(e,l,{get:()=>o[l],enumerable:!(n=G(o,l))||n.enumerable});return e};var u=(e,o,a)=>(a=e!=null?V(k(e)):{},d(o||!e||!e.__esModule?m(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>d(m({},"__esModule",{value:!0}),e);var A={};z(A,{Select:()=>b,SelectContent:()=>E,SelectGroup:()=>x,SelectItem:()=>D,SelectLabel:()=>W,SelectScrollDownButton:()=>f,SelectScrollUpButton:()=>p,SelectSeparator:()=>T,SelectTrigger:()=>B,SelectValue:()=>I});module.exports=q(A);var i=u(require("@radix-ui/react-select")),s=require("lucide-react"),c=u(require("react")),t=require("@stackshift-ui/system"),r=require("react/jsx-runtime"),S="Select",R="SelectTrigger",y="SelectValue",P="SelectContent",v="SelectItem",g="SelectGroup",C="SelectLabel",h="SelectSeparator",w="SelectScrollUpButton",N="SelectScrollDownButton",b=c.forwardRef(({...e},o)=>{let{[S]:a=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(a,{as:i.Root,ref:o,...e})});b.displayName=S;var x=c.forwardRef(({className:e,...o},a)=>{let{[g]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(n,{as:i.Group,ref:a,className:(0,t.cn)("p-1",e),...o})});x.displayName=g;var I=c.forwardRef(({className:e,...o},a)=>{let{[y]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(n,{as:i.Value,ref:a,className:(0,t.cn)("text-sm outline-none",e),...o})});I.displayName=y;var B=c.forwardRef(({className:e,children:o,...a},n)=>{let{[R]:l=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsxs)(l,{as:i.Trigger,ref:n,className:(0,t.cn)("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",e),...a,children:[o,(0,r.jsx)(i.Icon,{asChild:!0,children:(0,r.jsx)(s.ChevronDown,{className:"h-4 w-4 opacity-50"})})]})});B.displayName=R;var p=c.forwardRef(({className:e,...o},a)=>{let{[w]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(n,{as:i.ScrollUpButton,ref:a,className:(0,t.cn)("flex cursor-default items-center justify-center py-1",e),...o,children:(0,r.jsx)(s.ChevronUp,{className:"h-4 w-4"})})});p.displayName=w;var f=c.forwardRef(({className:e,...o},a)=>{let{[N]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(n,{as:i.ScrollDownButton,ref:a,className:(0,t.cn)("flex cursor-default items-center justify-center py-1",e),...o,children:(0,r.jsx)(s.ChevronDown,{className:"h-4 w-4"})})});f.displayName=N;var E=c.forwardRef(({className:e,children:o,position:a="popper",...n},l)=>{let{[P]:U=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(i.Portal,{children:(0,r.jsxs)(U,{as:i.Content,ref:l,className:(0,t.cn)("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",a==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:a,...n,children:[(0,r.jsx)(p,{}),(0,r.jsx)(i.Viewport,{className:(0,t.cn)("p-1",a==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:o}),(0,r.jsx)(f,{})]})})});E.displayName=P;var W=c.forwardRef(({className:e,...o},a)=>{let{[C]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(n,{as:i.Label,ref:a,className:(0,t.cn)("py-1.5 pl-8 pr-2 text-sm font-semibold",e),...o})});W.displayName=C;var D=c.forwardRef(({className:e,children:o,...a},n)=>{let{[v]:l=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsxs)(l,{as:i.Item,ref:n,className:(0,t.cn)("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",e),...a,children:[(0,r.jsx)("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:(0,r.jsx)(i.ItemIndicator,{children:(0,r.jsx)(s.Check,{className:"h-4 w-4"})})}),(0,r.jsx)(i.ItemText,{children:o})]})});D.displayName=v;var T=c.forwardRef(({className:e,...o},a)=>{let{[h]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,r.jsx)(n,{as:i.Separator,ref:a,className:(0,t.cn)("-mx-1 my-1 h-px bg-muted",e),...o})});T.displayName=h;0&&(module.exports={Select,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectScrollDownButton,SelectScrollUpButton,SelectSeparator,SelectTrigger,SelectValue});

package/dist/select.mjs

@@ -1 +1 @@
-import{a}from"./chunk-VCJRWWZ5.mjs";export{a as Select};
+import{a,b,c,d,e,f,g,h,i,j}from"./chunk-PPOLDV3F.mjs";export{a as Select,g as SelectContent,b as SelectGroup,i as SelectItem,h as SelectLabel,f as SelectScrollDownButton,e as SelectScrollUpButton,j as SelectSeparator,d as SelectTrigger,c as SelectValue};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/select",
   "description": "",
-  "version": "6.0.12",
+  "version": "7.0.0-beta.1",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,20 +29,22 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.10",
-    "@stackshift-ui/eslint-config": "6.0.10"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
+    "@radix-ui/react-select": "^2.2.5",
     "classnames": "^2.5.1",
-    "@stackshift-ui/system": "6.0.11",
-    "@stackshift-ui/scripts": "6.0.10"
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.1"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.1",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/select.test.tsx

@@ -1,20 +1,26 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
-import { Select } from "./select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 
 describe.concurrent("select", () => {
   afterEach(cleanup);
 
   test("Common: Select - test if renders without errors", ({ expect }) => {
     const clx = "select-class";
-    render(
-      <Select
-        className={clx}
-        name="stackshift-select"
-        ariaLabel="stackshift select"
-        items={["Option 1", "Option 2", "Option 3"]}
-      />,
+    const { unmount } = render(
+      <Select data-testid="select-container">
+        <SelectTrigger data-testid="select" className={clx}>
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent data-testid="select-content" className={clx}>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+          <SelectItem value="option3">Option 3</SelectItem>
+        </SelectContent>
+      </Select>,
     );
+
     expect(screen.getByTestId("select").classList).toContain(clx);
+    unmount();
   });
 });

package/src/select.tsx

@@ -1,86 +1,227 @@
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import cn from "classnames";
-import type { ElementType, HTMLProps, ReactNode } from "react";
-
-type StyleVariants<T extends string> = Record<T, string>;
-type Variant = "primary" | "outline";
-
-export interface SelectProps extends Omit<HTMLProps<HTMLSelectElement>, "as"> {
-  defaultValue?: string;
-  variant?: Variant;
-  label?: string;
-  labelClass?: string;
-  onChange?: () => void;
-  required?: boolean;
-  name: string;
-  items: string[];
-  ariaLabel: string;
-  noLabel?: boolean;
-  [key: string]: any;
-  children?: ReactNode;
-  className?: string;
-  as?: ElementType;
-}
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Select";
+const displayNameTrigger = "SelectTrigger";
+const displayNameValue = "SelectValue";
+const displayNameContent = "SelectContent";
+const displayNameItem = "SelectItem";
+const displayNameGroup = "SelectGroup";
+const displayNameLabel = "SelectLabel";
+const displayNameSeparator = "SelectSeparator";
+const displayNameScrollUpButton = "SelectScrollUpButton";
+const displayNameScrollDownButton = "SelectScrollDownButton";
+
+// bypass typescript "SelectSharedProps" error
+interface SelectProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {}
+
+const Select = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Root>, SelectProps>(
+  ({ ...props }, ref) => {
+    const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-export const Select: React.FC<SelectProps> = ({
-  defaultValue,
-  variant = "primary",
-  label,
-  labelClass,
-  onChange,
-  required = false,
-  name,
-  items,
-  ariaLabel,
-  noLabel = false,
-  children,
-  className,
-  as = "select",
-  ...props
-}) => {
-  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
-
-  const commonStyle =
-    "w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none";
-  const primary = `${commonStyle}`;
-  const outline = `${commonStyle} border border-solid border-primary-foreground`;
-
-  const variants: StyleVariants<Variant> = {
-    primary,
-    outline,
-  };
-  const variantClass = variants[variant] ?? primary;
+    return <Component as={SelectPrimitive.Root} ref={ref} {...props} />;
+  },
+);
+Select.displayName = displayName;
+
+const SelectGroup = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>
+>(({ className, ...props }, ref) => {
+  const { [displayNameGroup]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
-    <>
-      {!noLabel && (
-        <label htmlFor={name} className={labelClass}>
-          {label || name}
-        </label>
+    <Component as={SelectPrimitive.Group} ref={ref} className={cn("p-1", className)} {...props} />
+  );
+});
+SelectGroup.displayName = displayNameGroup;
+
+const SelectValue = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Value>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
+>(({ className, ...props }, ref) => {
+  const { [displayNameValue]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SelectPrimitive.Value}
+      ref={ref}
+      className={cn("text-sm outline-none", className)}
+      {...props}
+    />
+  );
+});
+SelectValue.displayName = displayNameValue;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => {
+  const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SelectPrimitive.Trigger}
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className,
       )}
+      {...props}>
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </Component>
+  );
+});
+SelectTrigger.displayName = displayNameTrigger;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => {
+  const { [displayNameScrollUpButton]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SelectPrimitive.ScrollUpButton}
+      ref={ref}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}>
+      <ChevronUp className="h-4 w-4" />
+    </Component>
+  );
+});
+SelectScrollUpButton.displayName = displayNameScrollUpButton;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => {
+  const { [displayNameScrollDownButton]: Component = DefaultComponent } =
+    useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SelectPrimitive.ScrollDownButton}
+      ref={ref}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}>
+      <ChevronDown className="h-4 w-4" />
+    </Component>
+  );
+});
+SelectScrollDownButton.displayName = displayNameScrollDownButton;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => {
+  const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <SelectPrimitive.Portal>
       <Component
-        onChange={onChange}
-        name={name}
-        defaultValue={defaultValue}
-        required={required}
-        as={as}
-        className={cn(variantClass, className)}
-        {...props}
-        data-testid={displayName}>
-        {items &&
-          items.length > 0 &&
-          items.map(opt => {
-            return (
-              <option value={opt} key={opt}>
-                {opt}
-              </option>
-            );
-          })}
+        as={SelectPrimitive.Content}
+        ref={ref}
+        className={cn(
+          "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}>
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          )}>
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
       </Component>
-    </>
+    </SelectPrimitive.Portal>
   );
-};
+});
+SelectContent.displayName = displayNameContent;
 
-Select.displayName = displayName;
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => {
+  const { [displayNameLabel]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SelectPrimitive.Label}
+      ref={ref}
+      className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+      {...props}
+    />
+  );
+});
+SelectLabel.displayName = displayNameLabel;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => {
+  const { [displayNameItem]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SelectPrimitive.Item}
+      ref={ref}
+      className={cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}>
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </Component>
+  );
+});
+SelectItem.displayName = displayNameItem;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => {
+  const { [displayNameSeparator]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SelectPrimitive.Separator}
+      ref={ref}
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  );
+});
+SelectSeparator.displayName = displayNameSeparator;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/dist/chunk-VCJRWWZ5.mjs

@@ -1 +0,0 @@
-import{DefaultComponent as N,useStackShiftUIComponents as T}from"@stackshift-ui/system";import V from"classnames";import{Fragment as L,jsx as n,jsxs as x}from"react/jsx-runtime";var r="Select",v=({defaultValue:i,variant:c="primary",label:m,labelClass:p,onChange:d,required:g=!1,name:e,items:t,ariaLabel:P,noLabel:y=!1,children:R,className:u,as:b="select",...f})=>{var s;let{[r]:S=N}=T(),o="w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none",l=`${o}`,C=`${o} border border-solid border-primary-foreground`,h=(s={primary:l,outline:C}[c])!=null?s:l;return x(L,{children:[!y&&n("label",{htmlFor:e,className:p,children:m||e}),n(S,{onChange:d,name:e,defaultValue:i,required:g,as:b,className:V(h,u),...f,"data-testid":r,children:t&&t.length>0&&t.map(a=>n("option",{value:a,children:a},a))})]})};v.displayName=r;export{v as a};