@solibo/solibo-ui 0.5.15 → 0.5.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index25.css +1 -1
- package/dist/assets/index45.css +1 -1
- package/dist/assets/styles.css +1 -1
- package/dist/components/_dropdown/index.cjs +1 -1
- package/dist/components/_dropdown/index.js +1 -1
- package/dist/components/_sortable/index.cjs +1 -1
- package/dist/components/_sortable/index.js +20 -20
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.cjs.map +1 -1
- package/dist/components/input/index.js +25 -25
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/textarea/index.cjs +1 -1
- package/dist/components/textarea/index.cjs.map +1 -1
- package/dist/components/textarea/index.js +20 -19
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/styles.module-BON5Bi9g.cjs +2 -0
- package/dist/styles.module-BON5Bi9g.cjs.map +1 -0
- package/dist/styles.module-DbpbMZGd.js +10 -0
- package/dist/styles.module-DbpbMZGd.js.map +1 -0
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
- package/dist/styles.module-CitJm17A.cjs +0 -2
- package/dist/styles.module-CitJm17A.cjs.map +0 -1
- package/dist/styles.module-Ioe0wPWW.js +0 -9
- package/dist/styles.module-Ioe0wPWW.js.map +0 -1
package/dist/assets/index25.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
._sortable_12gha_1{margin-block:var(--scale-8)!important}._sortable_12gha_1>li{-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;margin-bottom:0;padding-block:var(--scale-8);position:relative}._sortable_12gha_1>li._dragging_12gha_13{cursor:grabbing;margin-block:var(--scale-8);opacity:var(--utils-tokens-opacity-minimal);padding:0}._sortable_12gha_1>li._dragging_12gha_13 :focus{outline:none}._sortable_12gha_1>li._dragging_12gha_13 :focus [data-component=card],._sortable_12gha_1>li._dragging_12gha_13 :focus [data-component=card]:after{cursor:grabbing}._sortable_12gha_1>li._dragging_12gha_13._dropping_12gha_28{opacity:var(--utils-tokens-opacity-minimal)}._sortable_12gha_1>li._dragging_12gha_13:first-of-type._dragging_12gha_13{margin-top:var(--utils-tokens-unit)}._sortable_12gha_1>li._dragging_12gha_13:last-of-type._dragging_12gha_13{padding-bottom:var(--scale-8)}._sortable_12gha_1._columns_12gha_42{-moz-column-gap:0;column-gap:0;margin-right:var(--utils-tokens-negative-unit)}._sortable_12gha_1._columns_12gha_42 li{padding-right:var(--utils-tokens-unit)}._sortable_12gha_1 ._pseudo_12gha_51:before,._sortable_12gha_1 ._pseudo_12gha_51:after{background:var(--colors-semantic-primary-primary-subtle);border-radius:var(--shape-border-radius-radius-lg);border:0 dotted var(--colors-semantic-primary-primary-subtle-border);content:"";display:block;height:0;margin-block:0;opacity:0;pointer-events:none;transition:all var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function)}._sortable_12gha_1 ._target-above_12gha_66:before,._sortable_12gha_1 ._target-below_12gha_67:after{border-width:var(--scale-1);height:var(--height);opacity:1;width:var(--width)}._sortable_12gha_1 ._target-above_12gha_66:before{margin-bottom:var(--utils-tokens-unit)}._sortable_12gha_1 ._target-below_12gha_67:after{margin-top:var(--utils-tokens-unit)}
|
package/dist/assets/index45.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
._label_u5idh_1{width:100%}._label_u5idh_1 span{display:block}._textarea_u5idh_9{field-sizing:content;font-size:var(--typography-font-sizes-body-md);height:auto;min-height:calc((var(--min-rows) * var(--utils-tokens-unit) * 1.25) + (2 * var(--utils-tokens-unit)));max-height:calc((var(--max-rows) * var(--utils-tokens-unit) * 1.25) + (2 * var(--utils-tokens-unit)));overflow-y:auto;resize:none;transition:height var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100%;word-break:break-word}
|
package/dist/assets/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
._input_1s8ts_1{background-image:var(--icon-svg);background-repeat:no-repeat;background-size:var(--utils-tokens-unit);background-position:var(--scale-8) center;border:var(--scale-1) solid var(--colors-semantic-border-default);border-radius:var(--shape-border-radius-radius-md);box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color);color:var(--colors-semantic-content-primary);font-size:var(--typography-font-sizes-body-md);padding:var(--utils-tokens-unit);padding-top:calc(var(--utils-tokens-unit) - var(--scale-1));transition:border var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100%}._input_1s8ts_1:disabled{background-color:var(--colors-semantic-interactive-disabled);color:var(--colors-semantic-content-primary);pointer-events:none}._input_1s8ts_1[data-icon=true]{padding-left:var(--scale-32)}._input_1s8ts_1::-moz-placeholder{color:var(--colors-neutral-300)}._input_1s8ts_1::placeholder{color:var(--colors-neutral-300)}._input_1s8ts_1[type=date],._input_1s8ts_1[type=datetime-local]{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}._input_1s8ts_1[type=datetime-local]{border:var(--scale-1) solid var(--colors-semantic-border-default);border-radius:var(--shape-border-radius-radius-md);padding:var(--utils-tokens-unit)}._input_1s8ts_1[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--colors-semantic-bg-surface);border:var(--scale-1) solid var(--colors-semantic-border-default);box-shadow:none;padding:0;height:calc(var(--utils-tokens-unit) * 1.25);width:calc(var(--utils-tokens-unit) * 1.25)}._input_1s8ts_1[type=radio]:checked{border-color:var(--colors-purple-500);border-width:var(--scale-4)}._input_1s8ts_1._touched_1s8ts_59:invalid{border-color:var(--colors-semantic-status-error-border);outline:solid var(--scale-1) var(--colors-semantic-status-error-border)}._label_1s8ts_65{position:relative}._label_1s8ts_65 span{display:block;margin-bottom:var(--shape-spacing-2xs)}._label_1s8ts_65:has(input[type=radio]){align-items:center;display:flex;flex-direction:row-reverse;gap:var(--utils-tokens-unit);justify-content:start}._label_1s8ts_65:has(input[type=radio]) span{margin-bottom:0}._code_1s8ts_86{margin-right:var(--scale-8);width:calc(5 * var(--utils-tokens-unit))}._code_1s8ts_86+input[type=tel]{width:calc(100% - (5 * var(--utils-tokens-unit) + var(--scale-8)))}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-s-lGsxio.cjs"),X=require("../input/index.cjs"),Y=require("../../styles.module-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-s-lGsxio.cjs"),X=require("../input/index.cjs"),Y=require("../../styles.module-BON5Bi9g.cjs"),Z=require("../list/index.cjs"),k=require("../../index-FM_lJcIM.cjs"),M=require("../../utils-DBzf7CFq.cjs"),ee="_dropdown_1dsxx_1",te="_empty_1dsxx_4",ne="_group_1dsxx_5",re="_placeholder_1dsxx_6",se="_filter_1dsxx_14",oe="_native_1dsxx_25",le="_option_1dsxx_35",ie="_options_1dsxx_57",ce="_panel_1dsxx_81",ae="_selected_1dsxx_104",ue="_text_1dsxx_108",de="_trigger_1dsxx_117",pe="_minimal_1dsxx_133",c={dropdown:ee,empty:te,group:ne,placeholder:re,filter:se,native:oe,option:le,options:ie,panel:ce,selected:ae,text:ue,trigger:de,minimal:pe};function Q(e,r){return{"--icon-svg":U.iconSVG(e).replace("currentColor",r)}}function N(e){return typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(N).join(" "):o.isValidElement(e)?N(e.props.children):""}function fe(e){return o.isValidElement(e)&&e.type==="option"}function me(e){return o.isValidElement(e)&&e.type==="optgroup"}function xe(e){return o.isValidElement(e)&&e.type===o.Fragment}function he(e){return o.isValidElement(e)&&e.type===k.Select}function V(e,r,s=!1){const l=[];return o.Children.forEach(e,t=>{if(xe(t)){l.push(...V(t.props.children,r,s));return}if(fe(t)){const d=N(t.props.children).trim(),p=t.props.value!=null?String(t.props.value):d;l.push({disabled:s||!!t.props.disabled,groupLabel:r,hidden:!!t.props.hidden,isPlaceholder:!!(t.props.hidden&&p===""),label:t.props.children,selected:!!t.props.selected,text:d,value:p});return}me(t)&&l.push(...V(t.props.children,t.props.label,s||!!t.props.disabled))}),l}function _e(e){const r=e.trim();if(!r)return null;const l=[.../[*?]/.test(r)?r:`*${r}*`].map(t=>t==="*"?".*":t==="?"?".":t.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${l}$`,"i")}function ge(e,r){const s=_e(r),l=e.filter(t=>!t.hidden&&!t.isPlaceholder);return s?l.filter(t=>s.test([t.groupLabel,t.text,t.value].filter(Boolean).join(" "))):l}function ve(e,r){return e.find(s=>s.value===r)??e.find(s=>s.isPlaceholder)??e[0]}function ye(e,r,s){var t;if(r!=null)return String(r);if(s!=null)return String(s);const l=e.find(d=>d.selected);return l?l.value:((t=e[0])==null?void 0:t.value)??""}function be(e){if(he(e)){const{children:r,placeholder:s,...l}=e.props;return{children:i.jsxs(i.Fragment,{children:[s&&i.jsx("option",{hidden:!0,value:"",children:s}),r]}),props:l}}return{children:e.props.children,props:e.props}}const we=({children:e,className:r,emptyLabel:s="No matches found",searchPlaceholder:l="Filter",variant:t="default",...d})=>{const p=be(e),{defaultValue:z,onChange:_,value:g,...T}=p.props,q=k.sanitizeSelectProps(T),C=o.useRef(null),R=o.useRef(null),O=o.useRef(null),P=o.useRef(null),x=V(p.children),h=g!=null,v=ye(x,g,z),[y,b]=o.useState(()=>v),[u,w]=o.useState(!1),[B,$]=o.useState(""),S=h?String(g):y,I={default:M.resolveColor("--colors-semantic-content-secondary"),white:M.resolveColor("--color-white","white")},L=t==="minimal"?I.white:I.default,f=ve(x,S),A=Q("chevron",L),G=Q("search",L),D=ge(x,B);o.useEffect(()=>{!h&&!x.some(n=>n.value===y)&&b(v)},[v,y,h,x]),o.useEffect(()=>{var n;if(!u){$("");return}(n=P.current)==null||n.focus()},[u]),o.useEffect(()=>{if(!u)return;const n=a=>{var m;(m=R.current)!=null&&m.contains(a.target)||w(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[u]);const K=n=>{h||b(n.target.value),_==null||_(n)},j=()=>{var n;w(!1),(n=C.current)==null||n.focus()},H=n=>{var F;h||b(n);const a=O.current;if(!a){j();return}const m=(F=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:F.set;m==null||m.call(a,n),a.dispatchEvent(new Event("change",{bubbles:!0})),j()},J=n=>{n.key==="Escape"&&j()};return i.jsxs("div",{className:E.t(c.dropdown,t==="minimal"&&c.minimal,r),onKeyDown:J,ref:R,...d,"data-component":"dropdown",children:[i.jsx("select",{...q,"aria-hidden":"true",className:c.native,onChange:K,ref:O,tabIndex:-1,value:S,children:p.children}),i.jsx(W.Button,{"aria-expanded":u,"aria-haspopup":"dialog",className:E.t(t==="default"&&Y.inputStyles.input,c.trigger,(f==null?void 0:f.isPlaceholder)&&c.placeholder),"data-open":u?"true":void 0,disabled:q.disabled,onClick:()=>w(n=>!n),ref:C,style:A,variant:"minimal",children:i.jsx("span",{className:c.text,children:(f==null?void 0:f.label)??"Select an option"})}),u&&i.jsxs("div",{className:c.panel,children:[i.jsx(X.Input,{"aria-label":"Filter",className:c.filter,icon:"search",onChange:n=>$(n.target.value),placeholder:l,ref:P,style:G,type:"search",value:B}),i.jsx(Z.List,{"aria-label":"Dropdown",className:c.options,children:D.length>0?D.map(n=>{const a=n.value===S;return i.jsx("li",{"data-component":"dropdown",children:i.jsxs(W.Button,{"aria-label":a?`${n.text}, selected`:n.text,className:E.t(c.option,a&&c.selected),disabled:n.disabled,onClick:()=>H(n.value),variant:"minimal",children:[i.jsx("span",{className:c.text,children:n.label}),n.groupLabel&&i.jsx("small",{className:c.group,children:n.groupLabel})]})},`${n.groupLabel??"root"}-${n.value}`)}):i.jsx("li",{className:c.empty,children:s})})]})]})};exports.Dropdown=we;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -4,7 +4,7 @@ import ee, { useRef as g, useState as O, useEffect as P, Children as te, isValid
|
|
|
4
4
|
import { Button as A } from "../button/index.js";
|
|
5
5
|
import { i as ne } from "../../icons-D6XjzxSX.js";
|
|
6
6
|
import { Input as re } from "../input/index.js";
|
|
7
|
-
import { i as oe } from "../../styles.module-
|
|
7
|
+
import { i as oe } from "../../styles.module-DbpbMZGd.js";
|
|
8
8
|
import { List as se } from "../list/index.js";
|
|
9
9
|
import { s as le, S as ie } from "../../index-BMYV_5ZN.js";
|
|
10
10
|
import { r as G } from "../../utils--n2yqjCy.js";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index25.css');const H=require("react/jsx-runtime"),O=require("../../classix-5H4IWnMA.cjs"),c=require("react"),G=require("../list/index.cjs"),J="
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index25.css');const H=require("react/jsx-runtime"),O=require("../../classix-5H4IWnMA.cjs"),c=require("react"),G=require("../list/index.cjs"),J="_sortable_12gha_1",K="_dragging_12gha_13",Q="_dropping_12gha_28",tt="_columns_12gha_42",et="_pseudo_12gha_51",f={sortable:J,dragging:K,dropping:Q,columns:tt,pseudo:et,"target-above":"_target-above_12gha_66","target-below":"_target-below_12gha_67"},X=c.createContext(null);function nt(){return c.useContext(X)}function rt({children:M,className:$,columns:E=1,isRearranging:x=!1,onChangeOrder:k,...A}){const B=Number.isFinite(E)?Math.max(1,Math.floor(E)):1,S=c.useMemo(()=>c.Children.toArray(M),[M]),u=c.useRef(-1),R=c.useMemo(()=>typeof window<"u"&&(navigator.maxTouchPoints>0||window.matchMedia("(pointer: coarse)").matches),[]),i=c.useRef(!1),D=c.useRef(null),v=c.useRef(null),b=c.useRef(null),T=c.useRef(!1),_=c.useRef(null),d=c.useRef(null),[w,F]=c.useState({height:0,width:0}),[h,g]=c.useState(null),[z,q]=c.useState(null),L={...A.style,"--height":`calc(${w.height}px - var(--scale-16))`,"--width":B>1?`calc(${w.width}px - var(--scale-16))`:`${w.width}px`},V=o=>{k(o.map((t,s)=>({id:String(c.isValidElement(t)?t.props["data-id"]??`idx-${s}`:`idx-${s}`),weight:o.length-1-s})))},y=(o,t)=>{if(t<0||t>=S.length||o===t)return;const s=S.slice(),[e]=s.splice(o,1);s.splice(t,0,e),q(t),V(s)},m=()=>{v.current!==null&&(clearTimeout(v.current),v.current=null)},C=()=>{d.current!==null&&(cancelAnimationFrame(d.current),d.current=null)},W=o=>{let t=(o==null?void 0:o.parentElement)??null;for(;t;){const{overflowY:s}=window.getComputedStyle(t);if(/(auto|scroll|overlay)/.test(s)&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return document.scrollingElement instanceof HTMLElement?document.scrollingElement:null},P=()=>{m(),C(),_.current=null,i.current=!1,D.current=null,b.current=null,T.current=!1,u.current=-1,g(null)},U=o=>o instanceof Element&&!!o.closest('button, a, input, textarea, select, option, [role="button"], [contenteditable="true"]'),Y=(o,t)=>{var N;const s=(N=document.elementFromPoint(o,t))==null?void 0:N.closest("[data-sortable-index]");if(!s)return;const e=Number(s.dataset.sortableIndex),n=u.current;if(!Number.isInteger(e)||n<0||e===n)return;const r=s.getBoundingClientRect(),a=e===n+1?w.height:r.height,l=t>r.top+a/2?e+1:e,I=l>n?l-1:l;D.current=I,g(I)},Z=o=>{const t=W(o);if(!t)return;const s=72,e=18,n=()=>{if(!i.current){d.current=null;return}const r=_.current;if(!r){d.current=requestAnimationFrame(n);return}const a=t===document.scrollingElement?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect();let p=0;if(r.y<a.top+s){const l=Math.max(0,r.y-a.top);p=-e*(1-l/s)}else if(r.y>a.bottom-s){const l=Math.max(0,a.bottom-r.y);p=e*(1-l/s)}p!==0&&(t.scrollBy({top:p,behavior:"auto"}),Y(r.x,r.y)),d.current=requestAnimationFrame(n)};C(),d.current=requestAnimationFrame(n)},j=()=>{u.current=-1,g(null)};return c.useEffect(()=>{x||q(null)},[x]),c.useEffect(()=>()=>{m(),C()},[]),c.useEffect(()=>{const o=t=>{i.current&&t.preventDefault()};return window.addEventListener("touchmove",o,{passive:!1}),()=>{m(),window.removeEventListener("touchmove",o)}},[]),H.jsx(G.List,{className:O.t($,f.sortable,B>1&&f.columns),columns:E,ordered:!0,style:L,...A,"data-component":"sortable",children:S.map((o,t)=>{const s=c.isValidElement(o)?o.key:null;return H.jsx("li",{"data-sortable-index":t,onClickCapture:e=>{T.current&&(e.preventDefault(),e.stopPropagation(),T.current=!1)},className:O.t(h!==null&&h>t-10&&h<t+10&&f.pseudo,h===t&&u.current<t&&f["target-below"],h===t&&u.current>t&&f["target-above"],u.current===t&&f.dragging,z===t&&x&&f.dropping),onContextMenu:e=>{(i.current||v.current!==null)&&e.preventDefault()},onTouchStart:e=>{if(x||U(e.target))return;const n=e.touches[0];if(!n)return;const r=e.currentTarget;b.current={index:t,x:n.clientX,y:n.clientY},m(),v.current=setTimeout(()=>{u.current=t,i.current=!0,D.current=t,T.current=!0,F({height:r.offsetHeight,width:r.offsetWidth}),g(t),_.current={x:n.clientX,y:n.clientY},Z(r)},350)},onTouchMove:e=>{const n=e.touches[0];if(n){if(_.current={x:n.clientX,y:n.clientY},!i.current){const r=b.current;if(!r)return;Math.hypot(n.clientX-r.x,n.clientY-r.y)>8&&(m(),b.current=null);return}Y(n.clientX,n.clientY)}},onTouchEnd:e=>{if(m(),!i.current){b.current=null;return}e.preventDefault();const n=u.current,r=D.current;n>=0&&r!==null&&n!==r&&y(n,r),P()},onTouchCancel:()=>P(),draggable:!x&&!R,onDragEnd:()=>j(),onDragOver:e=>{e.preventDefault(),e.dataTransfer.dropEffect="move";const n=u.current;if(n<0||n===t)return;const r=e.currentTarget.getBoundingClientRect(),a=t===n+1?w.height:r.height,l=e.clientY>r.top+a/2?t+1:t,I=l>n?l-1:l;g(I)},onDragStart:e=>{if(R){e.preventDefault();return}u.current=t,F({height:e.currentTarget.offsetHeight,width:e.currentTarget.offsetWidth}),e.dataTransfer.setData("text/plain",""),e.dataTransfer.effectAllowed="move",g(t)},onDrop:e=>{e.preventDefault();const n=u.current,r=h;n<0||r===null||n===r||(y(n,r),j())},"data-component":"sortable",children:H.jsx(X.Provider,{value:{canMoveDown:t<S.length-1,canMoveUp:t>0,index:t,moveDown:()=>y(t,t+1),moveUp:()=>y(t,t-1)},children:o})},s??t)})})}exports.Sortable=rt;exports.useOptionalSortableItem=nt;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -2,19 +2,19 @@ import { jsx as H } from "react/jsx-runtime";
|
|
|
2
2
|
import { t as O } from "../../classix-DG18itHa.js";
|
|
3
3
|
import A, { createContext as tt, useMemo as V, useRef as a, useState as M, useEffect as B, useContext as et } from "react";
|
|
4
4
|
import { List as nt } from "../list/index.js";
|
|
5
|
-
import '../../assets/index25.css';const rt = "
|
|
5
|
+
import '../../assets/index25.css';const rt = "_sortable_12gha_1", ot = "_dragging_12gha_13", ct = "_dropping_12gha_28", lt = "_columns_12gha_42", ut = "_pseudo_12gha_51", f = {
|
|
6
6
|
sortable: rt,
|
|
7
7
|
dragging: ot,
|
|
8
8
|
dropping: ct,
|
|
9
9
|
columns: lt,
|
|
10
10
|
pseudo: ut,
|
|
11
|
-
"target-above": "_target-
|
|
12
|
-
"target-below": "_target-
|
|
11
|
+
"target-above": "_target-above_12gha_66",
|
|
12
|
+
"target-below": "_target-below_12gha_67"
|
|
13
13
|
}, W = tt(null);
|
|
14
14
|
function ft() {
|
|
15
15
|
return et(W);
|
|
16
16
|
}
|
|
17
|
-
function
|
|
17
|
+
function ht({
|
|
18
18
|
children: F,
|
|
19
19
|
className: U,
|
|
20
20
|
columns: E = 1,
|
|
@@ -25,7 +25,7 @@ function mt({
|
|
|
25
25
|
const N = Number.isFinite(E) ? Math.max(1, Math.floor(E)) : 1, D = V(() => A.Children.toArray(F), [F]), l = a(-1), P = V(() => typeof window < "u" && (navigator.maxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches), []), i = a(!1), T = a(null), v = a(null), b = a(null), _ = a(!1), S = a(null), d = a(null), [w, X] = M({
|
|
26
26
|
height: 0,
|
|
27
27
|
width: 0
|
|
28
|
-
}), [
|
|
28
|
+
}), [h, m] = M(null), [R, $] = M(null), Z = {
|
|
29
29
|
...Y.style,
|
|
30
30
|
"--height": `calc(${w.height}px - var(--scale-16))`,
|
|
31
31
|
"--width": N > 1 ? `calc(${w.width}px - var(--scale-16))` : `${w.width}px`
|
|
@@ -38,7 +38,7 @@ function mt({
|
|
|
38
38
|
if (t < 0 || t >= D.length || o === t) return;
|
|
39
39
|
const c = D.slice(), [e] = c.splice(o, 1);
|
|
40
40
|
c.splice(t, 0, e), $(t), G(c);
|
|
41
|
-
},
|
|
41
|
+
}, p = () => {
|
|
42
42
|
v.current !== null && (clearTimeout(v.current), v.current = null);
|
|
43
43
|
}, C = () => {
|
|
44
44
|
d.current !== null && (cancelAnimationFrame(d.current), d.current = null);
|
|
@@ -53,7 +53,7 @@ function mt({
|
|
|
53
53
|
}
|
|
54
54
|
return document.scrollingElement instanceof HTMLElement ? document.scrollingElement : null;
|
|
55
55
|
}, k = () => {
|
|
56
|
-
|
|
56
|
+
p(), C(), S.current = null, i.current = !1, T.current = null, b.current = null, _.current = !1, l.current = -1, m(null);
|
|
57
57
|
}, K = (o) => o instanceof Element && !!o.closest('button, a, input, textarea, select, option, [role="button"], [contenteditable="true"]'), z = (o, t) => {
|
|
58
58
|
var q;
|
|
59
59
|
const c = (q = document.elementFromPoint(o, t)) == null ? void 0 : q.closest("[data-sortable-index]");
|
|
@@ -61,7 +61,7 @@ function mt({
|
|
|
61
61
|
const e = Number(c.dataset.sortableIndex), n = l.current;
|
|
62
62
|
if (!Number.isInteger(e) || n < 0 || e === n) return;
|
|
63
63
|
const r = c.getBoundingClientRect(), s = e === n + 1 ? w.height : r.height, u = t > r.top + s / 2 ? e + 1 : e, I = u > n ? u - 1 : u;
|
|
64
|
-
T.current = I,
|
|
64
|
+
T.current = I, m(I);
|
|
65
65
|
}, Q = (o) => {
|
|
66
66
|
const t = J(o);
|
|
67
67
|
if (!t) return;
|
|
@@ -94,12 +94,12 @@ function mt({
|
|
|
94
94
|
};
|
|
95
95
|
C(), d.current = requestAnimationFrame(n);
|
|
96
96
|
}, L = () => {
|
|
97
|
-
l.current = -1,
|
|
97
|
+
l.current = -1, m(null);
|
|
98
98
|
};
|
|
99
99
|
return B(() => {
|
|
100
100
|
x || $(null);
|
|
101
101
|
}, [x]), B(() => () => {
|
|
102
|
-
|
|
102
|
+
p(), C();
|
|
103
103
|
}, []), B(() => {
|
|
104
104
|
const o = (t) => {
|
|
105
105
|
i.current && t.preventDefault();
|
|
@@ -107,13 +107,13 @@ function mt({
|
|
|
107
107
|
return window.addEventListener("touchmove", o, {
|
|
108
108
|
passive: !1
|
|
109
109
|
}), () => {
|
|
110
|
-
|
|
110
|
+
p(), window.removeEventListener("touchmove", o);
|
|
111
111
|
};
|
|
112
112
|
}, []), /* @__PURE__ */ H(nt, { className: O(U, f.sortable, N > 1 && f.columns), columns: E, ordered: !0, style: Z, ...Y, "data-component": "sortable", children: D.map((o, t) => {
|
|
113
113
|
const c = A.isValidElement(o) ? o.key : null;
|
|
114
114
|
return /* @__PURE__ */ H("li", { "data-sortable-index": t, onClickCapture: (e) => {
|
|
115
115
|
_.current && (e.preventDefault(), e.stopPropagation(), _.current = !1);
|
|
116
|
-
}, className: O(
|
|
116
|
+
}, className: O(h !== null && h > t - 10 && h < t + 10 && f.pseudo, h === t && l.current < t && f["target-below"], h === t && l.current > t && f["target-above"], l.current === t && f.dragging, R === t && x && f.dropping), onContextMenu: (e) => {
|
|
117
117
|
(i.current || v.current !== null) && e.preventDefault();
|
|
118
118
|
}, onTouchStart: (e) => {
|
|
119
119
|
if (x || K(e.target)) return;
|
|
@@ -124,11 +124,11 @@ function mt({
|
|
|
124
124
|
index: t,
|
|
125
125
|
x: n.clientX,
|
|
126
126
|
y: n.clientY
|
|
127
|
-
},
|
|
127
|
+
}, p(), v.current = setTimeout(() => {
|
|
128
128
|
l.current = t, i.current = !0, T.current = t, _.current = !0, X({
|
|
129
129
|
height: r.offsetHeight,
|
|
130
130
|
width: r.offsetWidth
|
|
131
|
-
}),
|
|
131
|
+
}), m(t), S.current = {
|
|
132
132
|
x: n.clientX,
|
|
133
133
|
y: n.clientY
|
|
134
134
|
}, Q(r);
|
|
@@ -142,13 +142,13 @@ function mt({
|
|
|
142
142
|
}, !i.current) {
|
|
143
143
|
const r = b.current;
|
|
144
144
|
if (!r) return;
|
|
145
|
-
Math.hypot(n.clientX - r.x, n.clientY - r.y) > 8 && (
|
|
145
|
+
Math.hypot(n.clientX - r.x, n.clientY - r.y) > 8 && (p(), b.current = null);
|
|
146
146
|
return;
|
|
147
147
|
}
|
|
148
148
|
z(n.clientX, n.clientY);
|
|
149
149
|
}
|
|
150
150
|
}, onTouchEnd: (e) => {
|
|
151
|
-
if (
|
|
151
|
+
if (p(), !i.current) {
|
|
152
152
|
b.current = null;
|
|
153
153
|
return;
|
|
154
154
|
}
|
|
@@ -160,7 +160,7 @@ function mt({
|
|
|
160
160
|
const n = l.current;
|
|
161
161
|
if (n < 0 || n === t) return;
|
|
162
162
|
const r = e.currentTarget.getBoundingClientRect(), s = t === n + 1 ? w.height : r.height, u = e.clientY > r.top + s / 2 ? t + 1 : t, I = u > n ? u - 1 : u;
|
|
163
|
-
|
|
163
|
+
m(I);
|
|
164
164
|
}, onDragStart: (e) => {
|
|
165
165
|
if (P) {
|
|
166
166
|
e.preventDefault();
|
|
@@ -169,10 +169,10 @@ function mt({
|
|
|
169
169
|
l.current = t, X({
|
|
170
170
|
height: e.currentTarget.offsetHeight,
|
|
171
171
|
width: e.currentTarget.offsetWidth
|
|
172
|
-
}), e.dataTransfer.setData("text/plain", ""), e.dataTransfer.effectAllowed = "move",
|
|
172
|
+
}), e.dataTransfer.setData("text/plain", ""), e.dataTransfer.effectAllowed = "move", m(t);
|
|
173
173
|
}, onDrop: (e) => {
|
|
174
174
|
e.preventDefault();
|
|
175
|
-
const n = l.current, r =
|
|
175
|
+
const n = l.current, r = h;
|
|
176
176
|
n < 0 || r === null || n === r || (y(n, r), L());
|
|
177
177
|
}, "data-component": "sortable", children: /* @__PURE__ */ H(W.Provider, { value: {
|
|
178
178
|
canMoveDown: t < D.length - 1,
|
|
@@ -184,7 +184,7 @@ function mt({
|
|
|
184
184
|
}) });
|
|
185
185
|
}
|
|
186
186
|
export {
|
|
187
|
-
|
|
187
|
+
ht as Sortable,
|
|
188
188
|
ft as useOptionalSortableItem
|
|
189
189
|
};
|
|
190
190
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("../../classix-5H4IWnMA.cjs"),l=require("react"),P=require("../../icons-s-lGsxio.cjs"),T=require("../../utils-DBzf7CFq.cjs"),u=require("../../styles.module-BON5Bi9g.cjs");function b({className:C,defaultCountryCode:h="+47",disabled:a=!1,icon:i,label:m,placeholder:v,ref:g,required:c,type:t="text",...e}){const[r,x]=l.useState(""),[o,S]=l.useState(""),{onChange:N,value:j,...q}=e,{touched:p,onBlur:f}=T.useTouched(j===""),y=i&&t!=="radio"&&t!=="datetime-local"?{"--icon-svg":P.iconSVG(i,!0)}:void 0;l.useEffect(()=>{if(typeof e.onChange=="function"&&t==="tel"){const s={name:e.name,value:o?(r||h).split(" ").join("")+o.split(" ").join(""):void 0};e.onChange({target:s,currentTarget:s})}},[r,o]),l.useEffect(()=>{t==="tel"&&!e.value&&(S(""),x(""))},[e.value,t]);const I=n.jsxs(n.Fragment,{children:[n.jsx("input",{disabled:a,hidden:!0,onChange:N,pattern:void 0,placeholder:v,ref:g,type:t,value:j}),n.jsx("input",{type:"text",className:d.t(u.inputStyles.code,u.inputStyles.input),disabled:a,maxLength:5,onChange:s=>x(s.target.value),placeholder:h,value:r}),n.jsx("input",{type:"tel",className:d.t(u.inputStyles.input,p&&u.inputStyles.touched),"data-icon":i?"true":void 0,disabled:a,maxLength:14,name:void 0,onChange:s=>S(s.target.value),onBlur:f,pattern:e.pattern,required:c,style:y,value:o,...q})]});return n.jsxs("label",{className:u.inputStyles.label,"data-component":"input",children:[m&&n.jsx("span",{"data-required":c||void 0,children:m}),t==="tel"?I:n.jsx("input",{ref:g,className:d.t(u.inputStyles.input,C,p&&u.inputStyles.touched),"data-icon":i?"true":void 0,disabled:a,onBlur:f,placeholder:v,required:c,style:y,type:t,...e})]})}exports.Input=b;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n defaultCountryCode?: string;\n disabled?: boolean;\n icon?: IconName;\n label?: string;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n placeholder?: string;\n type?:\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'number'\n | 'password'\n | 'radio'\n | 'search'\n | 'tel'\n | 'text';\n};\n\nexport function Input({\n className,\n defaultCountryCode = '+47',\n disabled = false,\n icon,\n label,\n placeholder,\n ref,\n required,\n type = 'text',\n ...props\n}: InputProps) {\n const [countryCode, setCountryCode] = useState('');\n const [phoneNumber, setPhoneNumber] = useState('');\n const { onChange, value, ...restProps } = props;\n const { touched, onBlur } = useTouched(value === '');\n\n type withVars =\n | (React.CSSProperties & {\n '--icon-svg'?: string;\n })\n | undefined;\n\n const withVars: withVars =\n icon && type !== 'radio' && type !== 'datetime-local'\n ? {\n '--icon-svg': iconSVG(icon, true),\n }\n : undefined;\n\n useEffect(() => {\n if (typeof props.onChange === 'function' && type === 'tel') {\n const target = {\n name: props.name,\n value: phoneNumber\n ? (countryCode || defaultCountryCode).split(' ').join('') +\n phoneNumber.split(' ').join('')\n : undefined,\n } as unknown as HTMLInputElement;\n // eslint-disable-next-line\n (props.onChange as any)({ target, currentTarget: target });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [countryCode, phoneNumber]);\n\n useEffect(() => {\n if (type === 'tel' && !props.value) {\n setPhoneNumber('');\n setCountryCode('');\n }\n }, [props.value, type]);\n\n const telephoneInput = (\n <>\n <input\n disabled={disabled}\n hidden\n onChange={onChange}\n pattern={undefined}\n placeholder={placeholder}\n ref={ref}\n type={type}\n value={value}\n />\n <input\n type='text'\n className={styles.input}\n disabled={disabled}\n maxLength={5}\n onChange={(e) => setCountryCode(e.target.value)}\n placeholder={defaultCountryCode}\n value={countryCode}\n />\n <input\n type='tel'\n className={cx(styles.input, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n maxLength={14}\n name={undefined}\n onChange={(e) => setPhoneNumber(e.target.value)}\n onBlur={onBlur}\n pattern={props.pattern}\n required={required}\n style={withVars}\n value={phoneNumber}\n {...restProps}\n />\n </>\n );\n\n return (\n <label className={styles.label}>\n {label && <span data-required={required || undefined}>{label}</span>}\n {type === 'tel' ? (\n telephoneInput\n ) : (\n <input\n ref={ref}\n className={cx(styles.input, className, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n onBlur={onBlur}\n placeholder={placeholder}\n required={required}\n style={withVars}\n type={type}\n {...props}\n />\n )}\n </label>\n );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","required","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n defaultCountryCode?: string;\n disabled?: boolean;\n icon?: IconName;\n label?: string;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n placeholder?: string;\n type?:\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'number'\n | 'password'\n | 'radio'\n | 'search'\n | 'tel'\n | 'text';\n};\n\nexport function Input({\n className,\n defaultCountryCode = '+47',\n disabled = false,\n icon,\n label,\n placeholder,\n ref,\n required,\n type = 'text',\n ...props\n}: InputProps) {\n const [countryCode, setCountryCode] = useState('');\n const [phoneNumber, setPhoneNumber] = useState('');\n const { onChange, value, ...restProps } = props;\n const { touched, onBlur } = useTouched(value === '');\n\n type withVars =\n | (React.CSSProperties & {\n '--icon-svg'?: string;\n })\n | undefined;\n\n const withVars: withVars =\n icon && type !== 'radio' && type !== 'datetime-local'\n ? {\n '--icon-svg': iconSVG(icon, true),\n }\n : undefined;\n\n useEffect(() => {\n if (typeof props.onChange === 'function' && type === 'tel') {\n const target = {\n name: props.name,\n value: phoneNumber\n ? (countryCode || defaultCountryCode).split(' ').join('') +\n phoneNumber.split(' ').join('')\n : undefined,\n } as unknown as HTMLInputElement;\n // eslint-disable-next-line\n (props.onChange as any)({ target, currentTarget: target });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [countryCode, phoneNumber]);\n\n useEffect(() => {\n if (type === 'tel' && !props.value) {\n setPhoneNumber('');\n setCountryCode('');\n }\n }, [props.value, type]);\n\n const telephoneInput = (\n <>\n <input\n disabled={disabled}\n hidden\n onChange={onChange}\n pattern={undefined}\n placeholder={placeholder}\n ref={ref}\n type={type}\n value={value}\n />\n <input\n type='text'\n className={cx(styles.code, styles.input)}\n disabled={disabled}\n maxLength={5}\n onChange={(e) => setCountryCode(e.target.value)}\n placeholder={defaultCountryCode}\n value={countryCode}\n />\n <input\n type='tel'\n className={cx(styles.input, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n maxLength={14}\n name={undefined}\n onChange={(e) => setPhoneNumber(e.target.value)}\n onBlur={onBlur}\n pattern={props.pattern}\n required={required}\n style={withVars}\n value={phoneNumber}\n {...restProps}\n />\n </>\n );\n\n return (\n <label className={styles.label}>\n {label && <span data-required={required || undefined}>{label}</span>}\n {type === 'tel' ? (\n telephoneInput\n ) : (\n <input\n ref={ref}\n className={cx(styles.input, className, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n onBlur={onBlur}\n placeholder={placeholder}\n required={required}\n style={withVars}\n type={type}\n {...props}\n />\n )}\n </label>\n );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","required","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","pattern"],"mappings":"0SA2BO,SAASA,EAAM,CACpBC,UAAAA,EACAC,mBAAAA,EAAqB,MACrBC,SAAAA,EAAW,GACXC,KAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,IAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,OACP,GAAGC,CACO,EAAG,CACb,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAE,EAC3C,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAE,EAC3C,CAAEG,SAAAA,EAAUC,MAAAA,EAAO,GAAGC,CAAAA,EAAcR,EACpC,CAAES,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAQ7CK,EACJlB,GAAQK,IAAS,SAAWA,IAAS,iBACjC,CACE,aAAcc,EAAAA,QAAQnB,EAAM,EAAI,CAAA,EAElCoB,OAENC,EAAAA,UAAU,IAAM,CACd,GAAI,OAAOf,EAAMM,UAAa,YAAcP,IAAS,MAAO,CAC1D,MAAMiB,EAAS,CACbC,KAAMjB,EAAMiB,KACZV,MAAOH,GACFH,GAAeT,GAAoB0B,MAAM,GAAG,EAAEC,KAAK,EAAE,EACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,EAC9BL,MAAAA,EAGLd,EAAMM,SAAiB,CAAEU,OAAAA,EAAQI,cAAeJ,CAAAA,CAAQ,CAC3D,CAEF,EAAG,CAACf,EAAaG,CAAW,CAAC,EAE7BW,EAAAA,UAAU,IAAM,CACVhB,IAAS,OAAS,CAACC,EAAMO,QAC3BF,EAAe,EAAE,EACjBH,EAAe,EAAE,EAErB,EAAG,CAACF,EAAMO,MAAOR,CAAI,CAAC,EAEtB,MAAMsB,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,SAAA/B,EACA,OAAM,GACN,SAAAa,EACA,QAASQ,OACT,YAAAlB,EACA,IAAAC,EACA,KAAAE,EACA,MAAAQ,CAAA,CAAa,EAEfiB,EAAAA,IAAC,QAAA,CACC,KAAK,OACL,UAAWC,IAAGC,EAAAA,YAAOC,KAAMD,EAAAA,YAAOE,KAAK,EACvC,SAAAnC,EACA,UAAW,EACX,SAAWoC,GAAM3B,EAAe2B,EAAEb,OAAOT,KAAK,EAC9C,YAAaf,EACb,MAAOS,CAAAA,CAAY,QAEpB,QAAA,CACC,KAAK,MACL,UAAWwB,EAAAA,EAAGC,EAAAA,YAAOE,MAAOnB,GAAWiB,EAAAA,YAAOjB,OAAO,EACrD,YAAWf,EAAO,OAASoB,OAC3B,SAAArB,EACA,UAAW,GACX,KAAMqB,OACN,SAAWe,GAAMxB,EAAewB,EAAEb,OAAOT,KAAK,EAC9C,OAAAG,EACA,QAASV,EAAM8B,QACf,SAAAhC,EACA,MAAOc,EACP,MAAOR,EACP,GAAII,CAAAA,CAAU,CAAA,EAElB,EAGF,cACG,QAAA,CAAM,UAAWkB,EAAAA,YAAO/B,MAAM,iBAAA,QAC5BA,SAAAA,CAAAA,GAAS6B,EAAAA,IAAC,OAAA,CAAK,gBAAe1B,GAAYgB,OAAYnB,SAAAA,EAAM,EAC5DI,IAAS,MACRsB,EAEAG,EAAAA,IAAC,QAAA,CACC,IAAA3B,EACA,UAAW4B,EAAAA,EAAGC,EAAAA,YAAOE,MAAOrC,EAAWkB,GAAWiB,EAAAA,YAAOjB,OAAO,EAChE,YAAWf,EAAO,OAASoB,OAC3B,SAAArB,EACA,OAAAiB,EACA,YAAAd,EACA,SAAAE,EACA,MAAOc,EACP,KAAAb,EACA,GAAIC,CAAAA,CAAM,CAAA,EAGhB,CAEJ"}
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { t as
|
|
1
|
+
import { jsxs as j, Fragment as w, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { t as s } from "../../classix-DG18itHa.js";
|
|
3
3
|
import { useState as S, useEffect as I } from "react";
|
|
4
4
|
import { i as B } from "../../icons-D6XjzxSX.js";
|
|
5
5
|
import { u as E } from "../../utils--n2yqjCy.js";
|
|
6
|
-
import { i as
|
|
6
|
+
import { i as n } from "../../styles.module-DbpbMZGd.js";
|
|
7
7
|
function A({
|
|
8
8
|
className: L,
|
|
9
|
-
defaultCountryCode:
|
|
9
|
+
defaultCountryCode: m = "+47",
|
|
10
10
|
disabled: u = !1,
|
|
11
11
|
icon: i,
|
|
12
|
-
label:
|
|
13
|
-
placeholder:
|
|
12
|
+
label: h,
|
|
13
|
+
placeholder: d,
|
|
14
14
|
ref: v,
|
|
15
|
-
required:
|
|
15
|
+
required: c,
|
|
16
16
|
type: t = "text",
|
|
17
17
|
...e
|
|
18
18
|
}) {
|
|
19
|
-
const [
|
|
19
|
+
const [l, g] = S(""), [r, f] = S(""), {
|
|
20
20
|
onChange: P,
|
|
21
|
-
value:
|
|
21
|
+
value: p,
|
|
22
22
|
...T
|
|
23
23
|
} = e, {
|
|
24
|
-
touched:
|
|
25
|
-
onBlur:
|
|
26
|
-
} = E(
|
|
24
|
+
touched: x,
|
|
25
|
+
onBlur: C
|
|
26
|
+
} = E(p === ""), N = i && t !== "radio" && t !== "datetime-local" ? {
|
|
27
27
|
"--icon-svg": B(i, !0)
|
|
28
28
|
} : void 0;
|
|
29
29
|
I(() => {
|
|
30
30
|
if (typeof e.onChange == "function" && t === "tel") {
|
|
31
|
-
const
|
|
31
|
+
const a = {
|
|
32
32
|
name: e.name,
|
|
33
|
-
value: r ? (
|
|
33
|
+
value: r ? (l || m).split(" ").join("") + r.split(" ").join("") : void 0
|
|
34
34
|
};
|
|
35
35
|
e.onChange({
|
|
36
|
-
target:
|
|
37
|
-
currentTarget:
|
|
36
|
+
target: a,
|
|
37
|
+
currentTarget: a
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
}, [
|
|
41
|
-
t === "tel" && !e.value && (
|
|
40
|
+
}, [l, r]), I(() => {
|
|
41
|
+
t === "tel" && !e.value && (f(""), g(""));
|
|
42
42
|
}, [e.value, t]);
|
|
43
|
-
const V = /* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */ o("input", { disabled: u, hidden: !0, onChange: P, pattern: void 0, placeholder:
|
|
45
|
-
/* @__PURE__ */ o("input", { type: "text", className:
|
|
46
|
-
/* @__PURE__ */ o("input", { type: "tel", className:
|
|
43
|
+
const V = /* @__PURE__ */ j(w, { children: [
|
|
44
|
+
/* @__PURE__ */ o("input", { disabled: u, hidden: !0, onChange: P, pattern: void 0, placeholder: d, ref: v, type: t, value: p }),
|
|
45
|
+
/* @__PURE__ */ o("input", { type: "text", className: s(n.code, n.input), disabled: u, maxLength: 5, onChange: (a) => g(a.target.value), placeholder: m, value: l }),
|
|
46
|
+
/* @__PURE__ */ o("input", { type: "tel", className: s(n.input, x && n.touched), "data-icon": i ? "true" : void 0, disabled: u, maxLength: 14, name: void 0, onChange: (a) => f(a.target.value), onBlur: C, pattern: e.pattern, required: c, style: N, value: r, ...T })
|
|
47
47
|
] });
|
|
48
|
-
return /* @__PURE__ */
|
|
49
|
-
|
|
50
|
-
t === "tel" ? V : /* @__PURE__ */ o("input", { ref: v, className:
|
|
48
|
+
return /* @__PURE__ */ j("label", { className: n.label, "data-component": "input", children: [
|
|
49
|
+
h && /* @__PURE__ */ o("span", { "data-required": c || void 0, children: h }),
|
|
50
|
+
t === "tel" ? V : /* @__PURE__ */ o("input", { ref: v, className: s(n.input, L, x && n.touched), "data-icon": i ? "true" : void 0, disabled: u, onBlur: C, placeholder: d, required: c, style: N, type: t, ...e })
|
|
51
51
|
] });
|
|
52
52
|
}
|
|
53
53
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n defaultCountryCode?: string;\n disabled?: boolean;\n icon?: IconName;\n label?: string;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n placeholder?: string;\n type?:\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'number'\n | 'password'\n | 'radio'\n | 'search'\n | 'tel'\n | 'text';\n};\n\nexport function Input({\n className,\n defaultCountryCode = '+47',\n disabled = false,\n icon,\n label,\n placeholder,\n ref,\n required,\n type = 'text',\n ...props\n}: InputProps) {\n const [countryCode, setCountryCode] = useState('');\n const [phoneNumber, setPhoneNumber] = useState('');\n const { onChange, value, ...restProps } = props;\n const { touched, onBlur } = useTouched(value === '');\n\n type withVars =\n | (React.CSSProperties & {\n '--icon-svg'?: string;\n })\n | undefined;\n\n const withVars: withVars =\n icon && type !== 'radio' && type !== 'datetime-local'\n ? {\n '--icon-svg': iconSVG(icon, true),\n }\n : undefined;\n\n useEffect(() => {\n if (typeof props.onChange === 'function' && type === 'tel') {\n const target = {\n name: props.name,\n value: phoneNumber\n ? (countryCode || defaultCountryCode).split(' ').join('') +\n phoneNumber.split(' ').join('')\n : undefined,\n } as unknown as HTMLInputElement;\n // eslint-disable-next-line\n (props.onChange as any)({ target, currentTarget: target });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [countryCode, phoneNumber]);\n\n useEffect(() => {\n if (type === 'tel' && !props.value) {\n setPhoneNumber('');\n setCountryCode('');\n }\n }, [props.value, type]);\n\n const telephoneInput = (\n <>\n <input\n disabled={disabled}\n hidden\n onChange={onChange}\n pattern={undefined}\n placeholder={placeholder}\n ref={ref}\n type={type}\n value={value}\n />\n <input\n type='text'\n className={styles.input}\n disabled={disabled}\n maxLength={5}\n onChange={(e) => setCountryCode(e.target.value)}\n placeholder={defaultCountryCode}\n value={countryCode}\n />\n <input\n type='tel'\n className={cx(styles.input, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n maxLength={14}\n name={undefined}\n onChange={(e) => setPhoneNumber(e.target.value)}\n onBlur={onBlur}\n pattern={props.pattern}\n required={required}\n style={withVars}\n value={phoneNumber}\n {...restProps}\n />\n </>\n );\n\n return (\n <label className={styles.label}>\n {label && <span data-required={required || undefined}>{label}</span>}\n {type === 'tel' ? (\n telephoneInput\n ) : (\n <input\n ref={ref}\n className={cx(styles.input, className, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n onBlur={onBlur}\n placeholder={placeholder}\n required={required}\n style={withVars}\n type={type}\n {...props}\n />\n )}\n </label>\n );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","required","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n defaultCountryCode?: string;\n disabled?: boolean;\n icon?: IconName;\n label?: string;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n placeholder?: string;\n type?:\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'number'\n | 'password'\n | 'radio'\n | 'search'\n | 'tel'\n | 'text';\n};\n\nexport function Input({\n className,\n defaultCountryCode = '+47',\n disabled = false,\n icon,\n label,\n placeholder,\n ref,\n required,\n type = 'text',\n ...props\n}: InputProps) {\n const [countryCode, setCountryCode] = useState('');\n const [phoneNumber, setPhoneNumber] = useState('');\n const { onChange, value, ...restProps } = props;\n const { touched, onBlur } = useTouched(value === '');\n\n type withVars =\n | (React.CSSProperties & {\n '--icon-svg'?: string;\n })\n | undefined;\n\n const withVars: withVars =\n icon && type !== 'radio' && type !== 'datetime-local'\n ? {\n '--icon-svg': iconSVG(icon, true),\n }\n : undefined;\n\n useEffect(() => {\n if (typeof props.onChange === 'function' && type === 'tel') {\n const target = {\n name: props.name,\n value: phoneNumber\n ? (countryCode || defaultCountryCode).split(' ').join('') +\n phoneNumber.split(' ').join('')\n : undefined,\n } as unknown as HTMLInputElement;\n // eslint-disable-next-line\n (props.onChange as any)({ target, currentTarget: target });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [countryCode, phoneNumber]);\n\n useEffect(() => {\n if (type === 'tel' && !props.value) {\n setPhoneNumber('');\n setCountryCode('');\n }\n }, [props.value, type]);\n\n const telephoneInput = (\n <>\n <input\n disabled={disabled}\n hidden\n onChange={onChange}\n pattern={undefined}\n placeholder={placeholder}\n ref={ref}\n type={type}\n value={value}\n />\n <input\n type='text'\n className={cx(styles.code, styles.input)}\n disabled={disabled}\n maxLength={5}\n onChange={(e) => setCountryCode(e.target.value)}\n placeholder={defaultCountryCode}\n value={countryCode}\n />\n <input\n type='tel'\n className={cx(styles.input, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n maxLength={14}\n name={undefined}\n onChange={(e) => setPhoneNumber(e.target.value)}\n onBlur={onBlur}\n pattern={props.pattern}\n required={required}\n style={withVars}\n value={phoneNumber}\n {...restProps}\n />\n </>\n );\n\n return (\n <label className={styles.label}>\n {label && <span data-required={required || undefined}>{label}</span>}\n {type === 'tel' ? (\n telephoneInput\n ) : (\n <input\n ref={ref}\n className={cx(styles.input, className, touched && styles.touched)}\n data-icon={icon ? 'true' : undefined}\n disabled={disabled}\n onBlur={onBlur}\n placeholder={placeholder}\n required={required}\n style={withVars}\n type={type}\n {...props}\n />\n )}\n </label>\n );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","required","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","pattern"],"mappings":";;;;;;AA2BO,SAASA,EAAM;AAAA,EACpBC,WAAAA;AAAAA,EACAC,oBAAAA,IAAqB;AAAA,EACrBC,UAAAA,IAAW;AAAA,EACXC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACP,GAAGC;AACO,GAAG;AACb,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAE,GAC3C,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAE,GAC3C;AAAA,IAAEG,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAO,GAAGC;AAAAA,EAAAA,IAAcR,GACpC;AAAA,IAAES,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWJ,MAAU,EAAE,GAQ7CK,IACJlB,KAAQK,MAAS,WAAWA,MAAS,mBACjC;AAAA,IACE,cAAcc,EAAQnB,GAAM,EAAI;AAAA,EAAA,IAElCoB;AAENC,EAAAA,EAAU,MAAM;AACd,QAAI,OAAOf,EAAMM,YAAa,cAAcP,MAAS,OAAO;AAC1D,YAAMiB,IAAS;AAAA,QACbC,MAAMjB,EAAMiB;AAAAA,QACZV,OAAOH,KACFH,KAAeT,GAAoB0B,MAAM,GAAG,EAAEC,KAAK,EAAE,IACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,IAC9BL;AAAAA,MAAAA;AAGLd,MAAAA,EAAMM,SAAiB;AAAA,QAAEU,QAAAA;AAAAA,QAAQI,eAAeJ;AAAAA,MAAAA,CAAQ;AAAA,IAC3D;AAAA,EAEF,GAAG,CAACf,GAAaG,CAAW,CAAC,GAE7BW,EAAU,MAAM;AACd,IAAIhB,MAAS,SAAS,CAACC,EAAMO,UAC3BF,EAAe,EAAE,GACjBH,EAAe,EAAE;AAAA,EAErB,GAAG,CAACF,EAAMO,OAAOR,CAAI,CAAC;AAEtB,QAAMsB,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAA,EACC,UAAA/B,GACA,QAAM,IACN,UAAAa,GACA,SAASQ,QACT,aAAAlB,GACA,KAAAC,GACA,MAAAE,GACA,OAAAQ,EAAA,CAAa;AAAA,IAEf,gBAAAiB,EAAC,SAAA,EACC,MAAK,QACL,WAAWC,EAAGC,EAAOC,MAAMD,EAAOE,KAAK,GACvC,UAAAnC,GACA,WAAW,GACX,UAAWoC,CAAAA,MAAM3B,EAAe2B,EAAEb,OAAOT,KAAK,GAC9C,aAAaf,GACb,OAAOS,EAAAA,CAAY;AAAA,sBAEpB,SAAA,EACC,MAAK,OACL,WAAWwB,EAAGC,EAAOE,OAAOnB,KAAWiB,EAAOjB,OAAO,GACrD,aAAWf,IAAO,SAASoB,QAC3B,UAAArB,GACA,WAAW,IACX,MAAMqB,QACN,UAAWe,CAAAA,MAAMxB,EAAewB,EAAEb,OAAOT,KAAK,GAC9C,QAAAG,GACA,SAASV,EAAM8B,SACf,UAAAhC,GACA,OAAOc,GACP,OAAOR,GACP,GAAII,EAAAA,CAAU;AAAA,EAAA,GAElB;AAGF,2BACG,SAAA,EAAM,WAAWkB,EAAO/B,OAAM,kBAAA,SAC5BA,UAAAA;AAAAA,IAAAA,KAAS,gBAAA6B,EAAC,QAAA,EAAK,iBAAe1B,KAAYgB,QAAYnB,UAAAA,GAAM;AAAA,IAC5DI,MAAS,QACRsB,IAEA,gBAAAG,EAAC,SAAA,EACC,KAAA3B,GACA,WAAW4B,EAAGC,EAAOE,OAAOrC,GAAWkB,KAAWiB,EAAOjB,OAAO,GAChE,aAAWf,IAAO,SAASoB,QAC3B,UAAArB,GACA,QAAAiB,GACA,aAAAd,GACA,UAAAE,GACA,OAAOc,GACP,MAAAb,GACA,GAAIC,EAAAA,CAAM;AAAA,EAAA,GAGhB;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index45.css');const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index45.css');const e=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),d=require("../../utils-DBzf7CFq.cjs"),t=require("../../styles.module-BON5Bi9g.cjs"),m="_label_u5idh_1",y="_textarea_u5idh_9",n={label:m,textarea:y},h=({label:s,maxRows:o=12,minRows:c=3,required:a,value:r,...u})=>{const{touched:i,onBlur:x}=d.useTouched(r==="");return e.jsxs("label",{className:n.label,"data-component":"textarea",children:[s&&e.jsx("span",{className:l.t(a&&t.inputStyles.required),children:s}),e.jsx("textarea",{className:l.t(t.inputStyles.input,n.textarea,i&&t.inputStyles.touched),onBlur:x,...u,required:a,style:{"--min-rows":c,"--max-rows":o},value:r})]})};exports.Textarea=h;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label>\n {label && <span className={cx(required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && inputStyles.touched)}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n />\n </label>\n );\n};\n"],"names":["Textarea","label","maxRows","minRows","required","value","props","touched","onBlur","useTouched","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label className={styles.label}>\n {label && <span className={cx(required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && inputStyles.touched)}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n />\n </label>\n );\n};\n"],"names":["Textarea","label","maxRows","minRows","required","value","props","touched","onBlur","useTouched","styles","jsx","cx","inputStyles","input","textarea"],"mappings":"iTAaaA,EAAWA,CAAC,CACvBC,MAAAA,EACAC,QAAAA,EAAU,GACVC,QAAAA,EAAU,EACVC,SAAAA,EACAC,MAAAA,EACA,GAAGC,CACU,IAAM,CACnB,KAAM,CAAEC,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAEnD,cACG,QAAA,CAAM,UAAWK,EAAOT,MAAM,iBAAA,WAC5BA,SAAAA,CAAAA,GAASU,EAAAA,IAAC,QAAK,UAAWC,EAAAA,EAAGR,GAAYS,EAAAA,YAAYT,QAAQ,EAAIH,SAAAA,CAAAA,CAAM,QACvE,WAAA,CACC,UAAWW,EAAAA,EAAGC,EAAAA,YAAYC,MAAOJ,EAAOK,SAAUR,GAAWM,EAAAA,YAAYN,OAAO,EAChF,OAAAC,EACA,GAAIF,EACJ,SAAAF,EACA,MACE,CACE,aAAcD,EACd,aAAcD,CAAAA,EAGlB,MAAAG,CAAA,CAAa,CAAA,EAEjB,CAEJ"}
|
|
@@ -1,30 +1,31 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { t as
|
|
3
|
-
import { u } from "../../utils--n2yqjCy.js";
|
|
4
|
-
import { i as t } from "../../styles.module-
|
|
5
|
-
import '../../assets/index45.css';const
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { jsxs as u, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { t as o } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { u as p } from "../../utils--n2yqjCy.js";
|
|
4
|
+
import { i as t } from "../../styles.module-DbpbMZGd.js";
|
|
5
|
+
import '../../assets/index45.css';const d = "_label_u5idh_1", h = "_textarea_u5idh_9", l = {
|
|
6
|
+
label: d,
|
|
7
|
+
textarea: h
|
|
8
|
+
}, N = ({
|
|
8
9
|
label: e,
|
|
9
10
|
maxRows: n = 12,
|
|
10
|
-
minRows:
|
|
11
|
+
minRows: c = 3,
|
|
11
12
|
required: a,
|
|
12
|
-
value:
|
|
13
|
-
...
|
|
13
|
+
value: s,
|
|
14
|
+
...m
|
|
14
15
|
}) => {
|
|
15
16
|
const {
|
|
16
|
-
touched:
|
|
17
|
-
onBlur:
|
|
18
|
-
} =
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
-
e && /* @__PURE__ */
|
|
21
|
-
/* @__PURE__ */
|
|
22
|
-
"--min-rows":
|
|
17
|
+
touched: i,
|
|
18
|
+
onBlur: x
|
|
19
|
+
} = p(s === "");
|
|
20
|
+
return /* @__PURE__ */ u("label", { className: l.label, "data-component": "textarea", children: [
|
|
21
|
+
e && /* @__PURE__ */ r("span", { className: o(a && t.required), children: e }),
|
|
22
|
+
/* @__PURE__ */ r("textarea", { className: o(t.input, l.textarea, i && t.touched), onBlur: x, ...m, required: a, style: {
|
|
23
|
+
"--min-rows": c,
|
|
23
24
|
"--max-rows": n
|
|
24
|
-
}, value:
|
|
25
|
+
}, value: s })
|
|
25
26
|
] });
|
|
26
27
|
};
|
|
27
28
|
export {
|
|
28
|
-
|
|
29
|
+
N as Textarea
|
|
29
30
|
};
|
|
30
31
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label>\n {label && <span className={cx(required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && inputStyles.touched)}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n />\n </label>\n );\n};\n"],"names":["Textarea","label","maxRows","minRows","required","value","props","touched","onBlur","useTouched","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label className={styles.label}>\n {label && <span className={cx(required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && inputStyles.touched)}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n />\n </label>\n );\n};\n"],"names":["Textarea","label","maxRows","minRows","required","value","props","touched","onBlur","useTouched","styles","jsx","cx","inputStyles","input","textarea"],"mappings":";;;;;;;GAaaA,IAAWA,CAAC;AAAA,EACvBC,OAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACA,GAAGC;AACU,MAAM;AACnB,QAAM;AAAA,IAAEC,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWJ,MAAU,EAAE;AAEnD,2BACG,SAAA,EAAM,WAAWK,EAAOT,OAAM,kBAAA,YAC5BA,UAAAA;AAAAA,IAAAA,KAAS,gBAAAU,EAAC,UAAK,WAAWC,EAAGR,KAAYS,EAAYT,QAAQ,GAAIH,UAAAA,EAAAA,CAAM;AAAA,sBACvE,YAAA,EACC,WAAWW,EAAGC,EAAYC,OAAOJ,EAAOK,UAAUR,KAAWM,EAAYN,OAAO,GAChF,QAAAC,GACA,GAAIF,GACJ,UAAAF,GACA,OACE;AAAA,MACE,cAAcD;AAAAA,MACd,cAAcD;AAAAA,IAAAA,GAGlB,OAAAG,EAAA,CAAa;AAAA,EAAA,GAEjB;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.module-BON5Bi9g.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import './assets/styles.css';const t = "_input_1s8ts_1", s = "_touched_1s8ts_59", o = "_label_1s8ts_65", _ = "_code_1s8ts_86", c = {
|
|
2
|
+
input: t,
|
|
3
|
+
touched: s,
|
|
4
|
+
label: o,
|
|
5
|
+
code: _
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
c as i
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=styles.module-DbpbMZGd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.module-DbpbMZGd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/dist/tokens.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.module-CitJm17A.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.module-Ioe0wPWW.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|