@purr-react-tailwindcss/components.select 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var O=Object.create;var R=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var U=(t,s,e,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of J(s))!Q.call(t,c)&&c!==e&&R(t,c,{get:()=>s[c],enumerable:!(i=Y(s,c))||i.enumerable});return t};var j=(t,s,e)=>(e=t!=null?O(K(t)):{},U(s||!t||!t.__esModule?R(e,"default",{value:t,enumerable:!0}):e,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),g=require("clsx"),n=require("react"),X=require("@purr-core/components.portal"),Z=require("@purr-core/hooks.block"),b=require("@purr-core/hooks.not-click-on-elements"),W=require("@purr-core/hooks.sync-state-with-props"),z=require("@purr-react-tailwindcss/utils.helpers"),T=n.lazy(()=>import("@purr-react-tailwindcss/components.helper-text").then(t=>({default:t.HelperText}))),A=n.lazy(()=>import("@purr-react-tailwindcss/components.icon").then(t=>({default:t.Icon}))),P=n.lazy(()=>import("@purr-react-tailwindcss/components.label").then(t=>({default:t.Label}))),p=n.lazy(()=>import("@purr-react-tailwindcss/components.post-adornment").then(t=>({default:t.PostAdornment}))),ee=n.lazy(()=>Promise.resolve().then(()=>require("./_menu-CedOsSIk.cjs")).then(t=>({default:t.SelectMenu}))),te=(t,s=!0)=>{var i;const e=(i=t.current)==null?void 0:i.getBoundingClientRect();return{left:(e==null?void 0:e.x)||0,top:((e==null?void 0:e.y)||0)+(s&&(window==null?void 0:window.scrollY)||0),width:(e==null?void 0:e.width)||0,height:(e==null?void 0:e.height)||0}},L=n.forwardRef(({options:t,value:s,variant:e="standard",labelProps:i,postAdornmentProps:c,helperTextProps:r,fullWidth:d=!1,disabled:u=!1,required:q=!1,error:o=null,isStandalone:k=!1,tabIndex:C=-1,menuHtmlAttributes:M,htmlAttributes:E,boxHtmlAttributes:I,fakeSelectHtmlAttributes:V,displayedOptionHtmlAttributes:_,onChange:w},ce)=>{const N=n.useRef(null),v=n.useRef(null),[a,S]=n.useState(!1),[B,H]=n.useState(null),{currentValue:m,setCurrentValue:y}=W(s,k);b([N,v],()=>{a&&S(!1)});const $=x=>{if(x.preventDefault(),!u){if(!a){const h=te(N);H({...h,top:h.top+h.height})}S(h=>!h)}},D=Z(()=>!!(u||a||m)),f=t.find(x=>x.value===m),F=n.useMemo(()=>l.jsx("div",{className:g("flex h-5 w-5 transition-all duration-300 ease-in-out",u?"text-white/50":"text-white",a?"rotate-180":"rotate-0",a&&"select-post-adornment-content--showed",u&&"select-post-adornment-content--disabled"),children:(c==null?void 0:c.children)??l.jsx(n.Suspense,{children:l.jsx(A,{name:"chevron-down"})})}),[u,a,c==null?void 0:c.children]),G=n.useCallback(x=>h=>{w==null||w(x,h),S(!1),y(x)},[w,y,S]);return l.jsxs("div",{className:g("relative min-w-52",d?"w-full":"w-fit","select"),...E,children:[l.jsxs("div",{role:"button",ref:N,onClick:$,tabIndex:C,className:g("relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",d?"w-full":"w-52",u?"cursor-not-allowed":"cursor-pointer",z.getVariantClasses(e,u),`select-box--variant-${e}`,"select-box",d&&"select-box--full-width",u&&"select-box--disabled",!!o&&"select-box--error"),...I,children:[l.jsx(n.Suspense,{children:!!(i!=null&&i.children)&&l.jsx(P,{...i,required:q,disabled:u,variant:e,isLabelCollapsed:D,isFocused:a,isError:!!o})}),l.jsx("select",{required:q,disabled:u,className:"h-full w-full cursor-pointer opacity-0",...V}),l.jsx("span",{className:g("absolute left-0 box-border w-full overflow-hidden overflow-ellipsis whitespace-nowrap border-none bg-transparent font-sans text-base transition-all duration-200 ease-in-out",i!=null&&i.children?"top-3 h-11 leading-[2.75rem]":"top-0 h-14 leading-[3.5rem]",u?"text-white/50":"text-white",z.getInputPaddingClasses(!1,!!(c!=null&&c.children),e),"select-inner-box",`select-inner-box--variant-${e}`,!!(i!=null&&i.children)&&"select-inner-box--hasLabel",u&&"select-inner-box--disabled"),title:typeof(f==null?void 0:f.label)=="string"?f==null?void 0:f.label:void 0,..._,children:f==null?void 0:f.label}),l.jsx(n.Suspense,{children:!!(c!=null&&c.children)&&l.jsx(p,{...c,variant:e,children:F})}),l.jsx(n.Suspense,{children:!!(r!=null&&r.children)&&l.jsx(T,{...r,isError:!!o,variant:e,children:(o==null?void 0:o.message)??(r==null?void 0:r.children)??""})})]}),l.jsx(X.Portal,{className:"portal-select",children:l.jsx(n.Suspense,{children:a&&l.jsx(ee,{ref:v,options:t,position:B,isShowed:a,currentValue:m,htmlAttributes:M,selectOption:G})})})]})});L.displayName="Select";exports.Select=L;
+'use strict';var b=require('clsx'),n=require('react'),components_portal=require('@purr-core/components.portal'),le=require('@purr-core/hooks.block'),re=require('@purr-core/hooks.not-click-on-elements'),se=require('@purr-core/hooks.sync-state-with-props'),utils_helpers=require('@purr-react-tailwindcss/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var b__default=/*#__PURE__*/_interopDefault(b);var n__default=/*#__PURE__*/_interopDefault(n);var le__default=/*#__PURE__*/_interopDefault(le);var re__default=/*#__PURE__*/_interopDefault(re);var se__default=/*#__PURE__*/_interopDefault(se);var J=Object.defineProperty;var E=(e,o)=>()=>(e&&(o=e(e=0)),o);var K=(e,o)=>{for(var t in o)J(e,t,{get:o[t],enumerable:true});};var v,L=E(()=>{v=n.memo(({value:e,displayedValue:o,label:t,disabled:r,htmlAttributes:s,handleSelectOption:a})=>n__default.default.createElement("button",{className:b__default.default("block h-9 w-full cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap px-3.5 text-left font-sans text-base transition-all duration-200 ease-in-out hover:bg-white/10",r&&"bg-gray-900 text-white/50",!r&&e===o&&"bg-sky-400/20 text-white",!r&&e!==o&&"bg-transparent text-white","select-option",e===o&&"select-option--selected",r&&"select-option--disabled"),onClick:a(e),...s,title:typeof t=="string"?t:void 0},t));v.displayName="SelectOption";});var H={};K(H,{SelectMenu:()=>_});var _,I=E(()=>{L();_=n.forwardRef(({options:e,position:o,isShowed:t,currentValue:r,htmlAttributes:s,selectOption:a},f)=>{let l=n.useMemo(()=>e.map(u=>n__default.default.createElement(v,{key:u.value,value:u.value,displayedValue:r,label:u.label,disabled:!!u.disabled,htmlAttributes:u.htmlAttributes,handleSelectOption:a})),[r,e,a]);return n__default.default.createElement("div",{ref:f,className:b__default.default("absolute z-50 min-w-32 rounded bg-gray-900 px-0 py-1.5","shadow-[0px_5px_5px_-3px_rgba(0,0,0,0.2),0px_8px_10px_1px_rgba(0,0,0,0.14),0px_3px_14px_2px_rgba(0,0,0,0.12)]","bg-gradient-to-b from-[#ffffff1f] to-[#ffffff1f]",t?"block":"hidden","select-options",t&&"select-options--showed"),style:{top:`${o?.top||0}px`,left:`${o?.left||0}px`,width:`${o?.width||0}px`},...s},l)});_.displayName="SelectMenu";});var ue=n.lazy(()=>import('@purr-react-tailwindcss/components.helper-text').then(e=>({default:e.HelperText}))),pe=n.lazy(()=>import('@purr-react-tailwindcss/components.icon').then(e=>({default:e.Icon}))),ce=n.lazy(()=>import('@purr-react-tailwindcss/components.label').then(e=>({default:e.Label}))),fe=n.lazy(()=>import('@purr-react-tailwindcss/components.post-adornment').then(e=>({default:e.PostAdornment}))),me=n.lazy(()=>Promise.resolve().then(()=>(I(),H)).then(e=>({default:e.SelectMenu}))),de=(e,o=true)=>{let t=e.current?.getBoundingClientRect();return {left:t?.x||0,top:(t?.y||0)+(o&&window?.scrollY||0),width:t?.width||0,height:t?.height||0}},he=n.forwardRef(({options:e,value:o,variant:t="standard",labelProps:r,postAdornmentProps:s,helperTextProps:a,fullWidth:f=false,disabled:l=false,required:u=false,error:h=null,isStandalone:T=false,tabIndex:P=-1,menuHtmlAttributes:D,htmlAttributes:$,boxHtmlAttributes:A,fakeSelectHtmlAttributes:j,displayedOptionHtmlAttributes:z,onChange:M},xe)=>{let w=n.useRef(null),O=n.useRef(null),[i,x]=n.useState(false),[B,V]=n.useState(null),{currentValue:S,setCurrentValue:y}=se__default.default(o,T);re__default.default([w,O],()=>{i&&x(false);});let q=c=>{if(c.preventDefault(),!l){if(!i){let p=de(w);V({...p,top:p.top+p.height});}x(p=>!p);}},F=le__default.default(()=>!!(l||i||S)),g=e.find(c=>c.value===S),G=n.useMemo(()=>n__default.default.createElement("div",{className:b__default.default("flex h-5 w-5 transition-all duration-300 ease-in-out",l?"text-white/50":"text-white",i?"rotate-180":"rotate-0",i&&"select-post-adornment-content--showed",l&&"select-post-adornment-content--disabled")},s?.children??n__default.default.createElement(n.Suspense,null,n__default.default.createElement(pe,{name:"chevron-down"}))),[l,i,s?.children]),Y=n.useCallback(c=>p=>{M?.(c,p),x(false),y(c);},[M,y,x]);return n__default.default.createElement("div",{className:b__default.default("relative min-w-52",f?"w-full":"w-fit","select"),...$},n__default.default.createElement("div",{role:"button",ref:w,onClick:q,tabIndex:P,className:b__default.default("relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",f?"w-full":"w-52",l?"cursor-not-allowed":"cursor-pointer",utils_helpers.getVariantClasses(t,l),`select-box--variant-${t}`,"select-box",f&&"select-box--full-width",l&&"select-box--disabled",!!h&&"select-box--error"),...A},n__default.default.createElement(n.Suspense,null,!!r?.children&&n__default.default.createElement(ce,{...r,required:u,disabled:l,variant:t,isLabelCollapsed:F,isFocused:i,isError:!!h})),n__default.default.createElement("select",{required:u,disabled:l,className:"h-full w-full cursor-pointer opacity-0",...j}),n__default.default.createElement("span",{className:b__default.default("absolute left-0 box-border w-full overflow-hidden overflow-ellipsis whitespace-nowrap border-none bg-transparent font-sans text-base transition-all duration-200 ease-in-out",r?.children?"top-3 h-11 leading-[2.75rem]":"top-0 h-14 leading-[3.5rem]",l?"text-white/50":"text-white",utils_helpers.getInputPaddingClasses(false,!!s?.children,t),"select-inner-box",`select-inner-box--variant-${t}`,!!r?.children&&"select-inner-box--hasLabel",l&&"select-inner-box--disabled"),title:typeof g?.label=="string"?g?.label:void 0,...z},g?.label),n__default.default.createElement(n.Suspense,null,!!s?.children&&n__default.default.createElement(fe,{...s,variant:t},G)),n__default.default.createElement(n.Suspense,null,!!a?.children&&n__default.default.createElement(ue,{...a,isError:!!h,variant:t},h?.message??a?.children??""))),n__default.default.createElement(components_portal.Portal,{className:"portal-select"},n__default.default.createElement(n.Suspense,null,i&&n__default.default.createElement(me,{ref:O,options:e,position:B,isShowed:i,currentValue:S,htmlAttributes:D,selectOption:Y}))))});he.displayName="Select";exports.Select=he;

package/dist/{_types.d.ts → index.d.cts}

@@ -1,22 +1,22 @@
-import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
 import { FieldError } from 'react-hook-form';
 import { IExtendable } from '@purr-core/utils.definitions';
 import { IHelperTextProps } from '@purr-react-tailwindcss/components.helper-text';
 import { ILabelProps } from '@purr-react-tailwindcss/components.label';
 import { IPostAdornmentProps } from '@purr-react-tailwindcss/components.post-adornment';
 
-export interface ISelectOption {
+interface ISelectOption {
     value: string;
     label: ReactNode;
     disabled?: boolean;
     htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
 }
-export interface ISelectOptionProps extends ISelectOption {
+interface ISelectOptionProps extends ISelectOption {
     displayedValue?: string;
     handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
 }
-export type TSelectVariant = "standard" | "outlined" | "filled";
-export interface ISelectMenuProps {
+type TSelectVariant = "standard" | "outlined" | "filled";
+interface ISelectMenuProps {
     options: ISelectOption[];
     position: {
         left: number;
@@ -29,7 +29,7 @@ export interface ISelectMenuProps {
     htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
     selectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
 }
-export interface ISelectProps {
+interface ISelectProps {
     options: ISelectOption[];
     value?: string;
     variant?: TSelectVariant;
@@ -49,3 +49,7 @@ export interface ISelectProps {
     isStandalone?: boolean;
     onChange?: (value: string, e: MouseEvent<HTMLSpanElement>) => void;
 }
+
+declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { type ISelectMenuProps, type ISelectOption, type ISelectOptionProps, type ISelectProps, Select, type TSelectVariant };

package/dist/index.d.ts

@@ -1,2 +1,55 @@
-export * from './_components';
-export * from './_types';
+import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
+import { FieldError } from 'react-hook-form';
+import { IExtendable } from '@purr-core/utils.definitions';
+import { IHelperTextProps } from '@purr-react-tailwindcss/components.helper-text';
+import { ILabelProps } from '@purr-react-tailwindcss/components.label';
+import { IPostAdornmentProps } from '@purr-react-tailwindcss/components.post-adornment';
+
+interface ISelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+interface ISelectOptionProps extends ISelectOption {
+    displayedValue?: string;
+    handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
+}
+type TSelectVariant = "standard" | "outlined" | "filled";
+interface ISelectMenuProps {
+    options: ISelectOption[];
+    position: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null;
+    isShowed: boolean;
+    currentValue?: string;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    selectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
+}
+interface ISelectProps {
+    options: ISelectOption[];
+    value?: string;
+    variant?: TSelectVariant;
+    labelProps?: ILabelProps;
+    postAdornmentProps?: IPostAdornmentProps;
+    helperTextProps?: IHelperTextProps;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    menuHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    boxHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    fakeSelectHtmlAttributes?: HTMLAttributes<HTMLSelectElement> & IExtendable;
+    displayedOptionHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    tabIndex?: number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: FieldError;
+    isStandalone?: boolean;
+    onChange?: (value: string, e: MouseEvent<HTMLSpanElement>) => void;
+}
+
+declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { type ISelectMenuProps, type ISelectOption, type ISelectOptionProps, type ISelectProps, Select, type TSelectVariant };

package/dist/index.js

@@ -1,201 +1 @@
-import { jsx as c, jsxs as C } from "react/jsx-runtime";
-import g from "clsx";
-import { lazy as w, forwardRef as J, useRef as E, useState as I, useMemo as K, Suspense as r, useCallback as O } from "react";
-import { Portal as Q } from "@purr-core/components.portal";
-import U from "@purr-core/hooks.block";
-import X from "@purr-core/hooks.not-click-on-elements";
-import Z from "@purr-core/hooks.sync-state-with-props";
-import { getVariantClasses as q, getInputPaddingClasses as W } from "@purr-react-tailwindcss/utils.helpers";
-const b = w(
-  () => import("@purr-react-tailwindcss/components.helper-text").then((t) => ({
-    default: t.HelperText
-  }))
-), T = w(
-  () => import("@purr-react-tailwindcss/components.icon").then((t) => ({
-    default: t.Icon
-  }))
-), A = w(
-  () => import("@purr-react-tailwindcss/components.label").then((t) => ({
-    default: t.Label
-  }))
-), P = w(
-  () => import("@purr-react-tailwindcss/components.post-adornment").then(
-    (t) => ({
-      default: t.PostAdornment
-    })
-  )
-), p = w(
-  () => import("./_menu-CZg5PPUe.js").then((t) => ({ default: t.SelectMenu }))
-), ee = (t, S = !0) => {
-  var i;
-  const e = (i = t.current) == null ? void 0 : i.getBoundingClientRect();
-  return {
-    left: (e == null ? void 0 : e.x) || 0,
-    top: ((e == null ? void 0 : e.y) || 0) + (S && (window == null ? void 0 : window.scrollY) || 0),
-    width: (e == null ? void 0 : e.width) || 0,
-    height: (e == null ? void 0 : e.height) || 0
-  };
-}, te = J(
-  ({
-    options: t,
-    value: S,
-    variant: e = "standard",
-    labelProps: i,
-    postAdornmentProps: l,
-    helperTextProps: a,
-    fullWidth: d = !1,
-    disabled: n = !1,
-    required: L = !1,
-    error: h = null,
-    isStandalone: M = !1,
-    tabIndex: V = -1,
-    menuHtmlAttributes: j,
-    htmlAttributes: B,
-    boxHtmlAttributes: H,
-    fakeSelectHtmlAttributes: $,
-    displayedOptionHtmlAttributes: y,
-    onChange: m
-  }, ce) => {
-    const N = E(null), R = E(null), [f, x] = I(!1), [z, D] = I(null), { currentValue: v, setCurrentValue: k } = Z(S, M);
-    X([N, R], () => {
-      f && x(!1);
-    });
-    const F = (o) => {
-      if (o.preventDefault(), !n) {
-        if (!f) {
-          const s = ee(N);
-          D({
-            ...s,
-            top: s.top + s.height
-          });
-        }
-        x((s) => !s);
-      }
-    }, G = U(() => !!(n || f || v)), u = t.find((o) => o.value === v), Y = K(
-      () => /* @__PURE__ */ c(
-        "div",
-        {
-          className: g(
-            "flex h-5 w-5 transition-all duration-300 ease-in-out",
-            n ? "text-white/50" : "text-white",
-            f ? "rotate-180" : "rotate-0",
-            f && "select-post-adornment-content--showed",
-            n && "select-post-adornment-content--disabled"
-          ),
-          children: (l == null ? void 0 : l.children) ?? /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(T, { name: "chevron-down" }) })
-        }
-      ),
-      [n, f, l == null ? void 0 : l.children]
-    ), _ = O(
-      (o) => (s) => {
-        m == null || m(o, s), x(!1), k(o);
-      },
-      [m, k, x]
-    );
-    return /* @__PURE__ */ C(
-      "div",
-      {
-        className: g(
-          "relative min-w-52",
-          d ? "w-full" : "w-fit",
-          "select"
-        ),
-        ...B,
-        children: [
-          /* @__PURE__ */ C(
-            "div",
-            {
-              role: "button",
-              ref: N,
-              onClick: F,
-              tabIndex: V,
-              className: g(
-                "relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",
-                d ? "w-full" : "w-52",
-                n ? "cursor-not-allowed" : "cursor-pointer",
-                q(e, n),
-                `select-box--variant-${e}`,
-                "select-box",
-                d && "select-box--full-width",
-                n && "select-box--disabled",
-                !!h && "select-box--error"
-              ),
-              ...H,
-              children: [
-                /* @__PURE__ */ c(r, { children: !!(i != null && i.children) && /* @__PURE__ */ c(
-                  A,
-                  {
-                    ...i,
-                    required: L,
-                    disabled: n,
-                    variant: e,
-                    isLabelCollapsed: G,
-                    isFocused: f,
-                    isError: !!h
-                  }
-                ) }),
-                /* @__PURE__ */ c(
-                  "select",
-                  {
-                    required: L,
-                    disabled: n,
-                    className: "h-full w-full cursor-pointer opacity-0",
-                    ...$
-                  }
-                ),
-                /* @__PURE__ */ c(
-                  "span",
-                  {
-                    className: g(
-                      "absolute left-0 box-border w-full overflow-hidden overflow-ellipsis whitespace-nowrap border-none bg-transparent font-sans text-base transition-all duration-200 ease-in-out",
-                      i != null && i.children ? "top-3 h-11 leading-[2.75rem]" : "top-0 h-14 leading-[3.5rem]",
-                      n ? "text-white/50" : "text-white",
-                      W(
-                        !1,
-                        !!(l != null && l.children),
-                        e
-                      ),
-                      "select-inner-box",
-                      `select-inner-box--variant-${e}`,
-                      !!(i != null && i.children) && "select-inner-box--hasLabel",
-                      n && "select-inner-box--disabled"
-                    ),
-                    title: typeof (u == null ? void 0 : u.label) == "string" ? u == null ? void 0 : u.label : void 0,
-                    ...y,
-                    children: u == null ? void 0 : u.label
-                  }
-                ),
-                /* @__PURE__ */ c(r, { children: !!(l != null && l.children) && /* @__PURE__ */ c(P, { ...l, variant: e, children: Y }) }),
-                /* @__PURE__ */ c(r, { children: !!(a != null && a.children) && /* @__PURE__ */ c(
-                  b,
-                  {
-                    ...a,
-                    isError: !!h,
-                    variant: e,
-                    children: (h == null ? void 0 : h.message) ?? (a == null ? void 0 : a.children) ?? ""
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ c(Q, { className: "portal-select", children: /* @__PURE__ */ c(r, { children: f && /* @__PURE__ */ c(
-            p,
-            {
-              ref: R,
-              options: t,
-              position: z,
-              isShowed: f,
-              currentValue: v,
-              htmlAttributes: j,
-              selectOption: _
-            }
-          ) }) })
-        ]
-      }
-    );
-  }
-);
-te.displayName = "Select";
-export {
-  te as Select
-};
+import b from'clsx';import n,{lazy,forwardRef,useRef,useState,useMemo,Suspense,useCallback,memo}from'react';import {Portal}from'@purr-core/components.portal';import le from'@purr-core/hooks.block';import re from'@purr-core/hooks.not-click-on-elements';import se from'@purr-core/hooks.sync-state-with-props';import {getVariantClasses,getInputPaddingClasses}from'@purr-react-tailwindcss/utils.helpers';var J=Object.defineProperty;var E=(e,o)=>()=>(e&&(o=e(e=0)),o);var K=(e,o)=>{for(var t in o)J(e,t,{get:o[t],enumerable:true});};var v,L=E(()=>{v=memo(({value:e,displayedValue:o,label:t,disabled:r,htmlAttributes:s,handleSelectOption:a})=>n.createElement("button",{className:b("block h-9 w-full cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap px-3.5 text-left font-sans text-base transition-all duration-200 ease-in-out hover:bg-white/10",r&&"bg-gray-900 text-white/50",!r&&e===o&&"bg-sky-400/20 text-white",!r&&e!==o&&"bg-transparent text-white","select-option",e===o&&"select-option--selected",r&&"select-option--disabled"),onClick:a(e),...s,title:typeof t=="string"?t:void 0},t));v.displayName="SelectOption";});var H={};K(H,{SelectMenu:()=>_});var _,I=E(()=>{L();_=forwardRef(({options:e,position:o,isShowed:t,currentValue:r,htmlAttributes:s,selectOption:a},f)=>{let l=useMemo(()=>e.map(u=>n.createElement(v,{key:u.value,value:u.value,displayedValue:r,label:u.label,disabled:!!u.disabled,htmlAttributes:u.htmlAttributes,handleSelectOption:a})),[r,e,a]);return n.createElement("div",{ref:f,className:b("absolute z-50 min-w-32 rounded bg-gray-900 px-0 py-1.5","shadow-[0px_5px_5px_-3px_rgba(0,0,0,0.2),0px_8px_10px_1px_rgba(0,0,0,0.14),0px_3px_14px_2px_rgba(0,0,0,0.12)]","bg-gradient-to-b from-[#ffffff1f] to-[#ffffff1f]",t?"block":"hidden","select-options",t&&"select-options--showed"),style:{top:`${o?.top||0}px`,left:`${o?.left||0}px`,width:`${o?.width||0}px`},...s},l)});_.displayName="SelectMenu";});var ue=lazy(()=>import('@purr-react-tailwindcss/components.helper-text').then(e=>({default:e.HelperText}))),pe=lazy(()=>import('@purr-react-tailwindcss/components.icon').then(e=>({default:e.Icon}))),ce=lazy(()=>import('@purr-react-tailwindcss/components.label').then(e=>({default:e.Label}))),fe=lazy(()=>import('@purr-react-tailwindcss/components.post-adornment').then(e=>({default:e.PostAdornment}))),me=lazy(()=>Promise.resolve().then(()=>(I(),H)).then(e=>({default:e.SelectMenu}))),de=(e,o=true)=>{let t=e.current?.getBoundingClientRect();return {left:t?.x||0,top:(t?.y||0)+(o&&window?.scrollY||0),width:t?.width||0,height:t?.height||0}},he=forwardRef(({options:e,value:o,variant:t="standard",labelProps:r,postAdornmentProps:s,helperTextProps:a,fullWidth:f=false,disabled:l=false,required:u=false,error:h=null,isStandalone:T=false,tabIndex:P=-1,menuHtmlAttributes:D,htmlAttributes:$,boxHtmlAttributes:A,fakeSelectHtmlAttributes:j,displayedOptionHtmlAttributes:z,onChange:M},xe)=>{let w=useRef(null),O=useRef(null),[i,x]=useState(false),[B,V]=useState(null),{currentValue:S,setCurrentValue:y}=se(o,T);re([w,O],()=>{i&&x(false);});let q=c=>{if(c.preventDefault(),!l){if(!i){let p=de(w);V({...p,top:p.top+p.height});}x(p=>!p);}},F=le(()=>!!(l||i||S)),g=e.find(c=>c.value===S),G=useMemo(()=>n.createElement("div",{className:b("flex h-5 w-5 transition-all duration-300 ease-in-out",l?"text-white/50":"text-white",i?"rotate-180":"rotate-0",i&&"select-post-adornment-content--showed",l&&"select-post-adornment-content--disabled")},s?.children??n.createElement(Suspense,null,n.createElement(pe,{name:"chevron-down"}))),[l,i,s?.children]),Y=useCallback(c=>p=>{M?.(c,p),x(false),y(c);},[M,y,x]);return n.createElement("div",{className:b("relative min-w-52",f?"w-full":"w-fit","select"),...$},n.createElement("div",{role:"button",ref:w,onClick:q,tabIndex:P,className:b("relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",f?"w-full":"w-52",l?"cursor-not-allowed":"cursor-pointer",getVariantClasses(t,l),`select-box--variant-${t}`,"select-box",f&&"select-box--full-width",l&&"select-box--disabled",!!h&&"select-box--error"),...A},n.createElement(Suspense,null,!!r?.children&&n.createElement(ce,{...r,required:u,disabled:l,variant:t,isLabelCollapsed:F,isFocused:i,isError:!!h})),n.createElement("select",{required:u,disabled:l,className:"h-full w-full cursor-pointer opacity-0",...j}),n.createElement("span",{className:b("absolute left-0 box-border w-full overflow-hidden overflow-ellipsis whitespace-nowrap border-none bg-transparent font-sans text-base transition-all duration-200 ease-in-out",r?.children?"top-3 h-11 leading-[2.75rem]":"top-0 h-14 leading-[3.5rem]",l?"text-white/50":"text-white",getInputPaddingClasses(false,!!s?.children,t),"select-inner-box",`select-inner-box--variant-${t}`,!!r?.children&&"select-inner-box--hasLabel",l&&"select-inner-box--disabled"),title:typeof g?.label=="string"?g?.label:void 0,...z},g?.label),n.createElement(Suspense,null,!!s?.children&&n.createElement(fe,{...s,variant:t},G)),n.createElement(Suspense,null,!!a?.children&&n.createElement(ue,{...a,isError:!!h,variant:t},h?.message??a?.children??""))),n.createElement(Portal,{className:"portal-select"},n.createElement(Suspense,null,i&&n.createElement(me,{ref:O,options:e,position:B,isShowed:i,currentValue:S,htmlAttributes:D,selectOption:Y}))))});he.displayName="Select";export{he as Select};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-tailwindcss/components.select",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,16 +25,16 @@
     "react": "*",
     "clsx": "*",
     "react-hook-form": "*",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-react-tailwindcss/components.helper-text": "0.0.6",
-    "@purr-react-tailwindcss/components.label": "0.0.6",
-    "@purr-react-tailwindcss/components.post-adornment": "0.0.6",
-    "@purr-react-tailwindcss/components.icon": "0.0.6",
-    "@purr-react-tailwindcss/utils.helpers": "0.0.4",
-    "@purr-core/components.portal": "0.0.7",
-    "@purr-core/hooks.block": "0.0.9",
-    "@purr-core/hooks.not-click-on-elements": "0.0.7",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7"
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-react-tailwindcss/components.helper-text": "0.0.8",
+    "@purr-react-tailwindcss/components.label": "0.0.8",
+    "@purr-react-tailwindcss/components.post-adornment": "0.0.8",
+    "@purr-react-tailwindcss/components.icon": "0.0.8",
+    "@purr-react-tailwindcss/utils.helpers": "0.0.6",
+    "@purr-core/components.portal": "0.0.9",
+    "@purr-core/hooks.block": "0.0.11",
+    "@purr-core/hooks.not-click-on-elements": "0.0.9",
+    "@purr-core/hooks.sync-state-with-props": "0.0.9"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -43,6 +43,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components/_menu.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISelectMenuProps } from '../_types';
-
-export declare const SelectMenu: React.ForwardRefExoticComponent<ISelectMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/_components/_option.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISelectOptionProps } from '../_types';
-
-export declare const SelectOption: React.MemoExoticComponent<({ value, displayedValue, label, disabled, htmlAttributes, handleSelectOption, }: ISelectOptionProps) => React.JSX.Element>;

package/dist/_components/index.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISelectProps } from '../_types';
-
-export declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/_menu-CZg5PPUe.js

@@ -1,72 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import s from "clsx";
-import { memo as b, forwardRef as h, useMemo as n } from "react";
-const p = b(
-  ({
-    value: t,
-    displayedValue: e,
-    label: l,
-    disabled: r,
-    htmlAttributes: x,
-    handleSelectOption: a
-  }) => /* @__PURE__ */ c(
-    "button",
-    {
-      className: s(
-        "block h-9 w-full cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap px-3.5 text-left font-sans text-base transition-all duration-200 ease-in-out hover:bg-white/10",
-        r && "bg-gray-900 text-white/50",
-        !r && t === e && "bg-sky-400/20 text-white",
-        !r && t !== e && "bg-transparent text-white",
-        "select-option",
-        t === e && "select-option--selected",
-        r && "select-option--disabled"
-      ),
-      onClick: a(t),
-      ...x,
-      title: typeof l == "string" ? l : void 0,
-      children: l
-    }
-  )
-);
-p.displayName = "SelectOption";
-const o = h(
-  ({ options: t, position: e, isShowed: l, currentValue: r, htmlAttributes: x, selectOption: a }, d) => {
-    const m = n(() => t.map((f) => /* @__PURE__ */ c(
-      p,
-      {
-        value: f.value,
-        displayedValue: r,
-        label: f.label,
-        disabled: !!f.disabled,
-        htmlAttributes: f.htmlAttributes,
-        handleSelectOption: a
-      },
-      f.value
-    )), [r, t, a]);
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        ref: d,
-        className: s(
-          "absolute z-50 min-w-32 rounded bg-gray-900 px-0 py-1.5",
-          "shadow-[0px_5px_5px_-3px_rgba(0,0,0,0.2),0px_8px_10px_1px_rgba(0,0,0,0.14),0px_3px_14px_2px_rgba(0,0,0,0.12)]",
-          "bg-gradient-to-b from-[#ffffff1f] to-[#ffffff1f]",
-          l ? "block" : "hidden",
-          "select-options",
-          l && "select-options--showed"
-        ),
-        style: {
-          top: `${(e == null ? void 0 : e.top) || 0}px`,
-          left: `${(e == null ? void 0 : e.left) || 0}px`,
-          width: `${(e == null ? void 0 : e.width) || 0}px`
-        },
-        ...x,
-        children: m
-      }
-    );
-  }
-);
-o.displayName = "SelectMenu";
-export {
-  o as SelectMenu
-};

package/dist/_menu-CedOsSIk.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),n=require("clsx"),f=require("react"),d=f.memo(({value:t,displayedValue:e,label:l,disabled:r,htmlAttributes:a,handleSelectOption:s})=>x.jsx("button",{className:n("block h-9 w-full cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap px-3.5 text-left font-sans text-base transition-all duration-200 ease-in-out hover:bg-white/10",r&&"bg-gray-900 text-white/50",!r&&t===e&&"bg-sky-400/20 text-white",!r&&t!==e&&"bg-transparent text-white","select-option",t===e&&"select-option--selected",r&&"select-option--disabled"),onClick:s(t),...a,title:typeof l=="string"?l:void 0,children:l}));d.displayName="SelectOption";const u=f.forwardRef(({options:t,position:e,isShowed:l,currentValue:r,htmlAttributes:a,selectOption:s},b)=>{const p=f.useMemo(()=>t.map(c=>x.jsx(d,{value:c.value,displayedValue:r,label:c.label,disabled:!!c.disabled,htmlAttributes:c.htmlAttributes,handleSelectOption:s},c.value)),[r,t,s]);return x.jsx("div",{ref:b,className:n("absolute z-50 min-w-32 rounded bg-gray-900 px-0 py-1.5","shadow-[0px_5px_5px_-3px_rgba(0,0,0,0.2),0px_8px_10px_1px_rgba(0,0,0,0.14),0px_3px_14px_2px_rgba(0,0,0,0.12)]","bg-gradient-to-b from-[#ffffff1f] to-[#ffffff1f]",l?"block":"hidden","select-options",l&&"select-options--showed"),style:{top:`${(e==null?void 0:e.top)||0}px`,left:`${(e==null?void 0:e.left)||0}px`,width:`${(e==null?void 0:e.width)||0}px`},...a,children:p})});u.displayName="SelectMenu";exports.SelectMenu=u;