@purr-react-tailwindcss/components.select 0.0.1

package/dist/_components/_menu.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1 @@
+"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;

package/dist/_types.d.ts

@@ -0,0 +1,51 @@
+import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } 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 {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+export interface ISelectOptionProps extends ISelectOption {
+    displayedValue?: string;
+    handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
+}
+export type TSelectVariant = "standard" | "outlined" | "filled";
+export 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>;
+}
+export 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;
+}

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_components';
+export * from './_types';

package/dist/index.js

@@ -0,0 +1,201 @@
+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
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@purr-react-tailwindcss/components.select",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "clsx": "*",
+    "react-hook-form": "*",
+    "@purr-core/utils.definitions": "0.0.6",
+    "@purr-react-tailwindcss/components.helper-text": "0.0.2",
+    "@purr-react-tailwindcss/components.label": "0.0.2",
+    "@purr-react-tailwindcss/components.post-adornment": "0.0.2",
+    "@purr-react-tailwindcss/components.icon": "0.0.2",
+    "@purr-react-tailwindcss/utils.helpers": "0.0.1",
+    "@purr-core/components.portal": "0.0.3",
+    "@purr-core/hooks.block": "0.0.5",
+    "@purr-core/hooks.not-click-on-elements": "0.0.4",
+    "@purr-core/hooks.sync-state-with-props": "0.0.4"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}