react-material-design 0.0.0-stage → 0.5.0

package/dist/components/Select/style.css

@@ -0,0 +1 @@
+.Select{width:fit-content;position:relative}.Select>.children{display:none}.Select>.Field{box-sizing:border-box;align-items:center;gap:4px;min-width:240px;max-width:100%;padding-inline:12px;display:flex}.Select>.Field.searchable{cursor:text}.Select>.Field:not(.searchable)>.control>input{cursor:pointer}.Select>.Field>.dropdown-indicator{margin-right:-4px}.Select>.Field.FilledField>.control{gap:4px}.Select>.Field.FilledField>.control>.Chip,.Select>.Field.FilledField>.control>input{margin-top:26px;margin-bottom:8px}.Select>.Field.FilledField>.control>input{min-height:initial}.Select>.Field>.control{flex:1 1 fit-content;flex-wrap:wrap;align-self:stretch;align-items:center;min-width:0;padding-inline:4px;display:flex;position:relative}.Select>.Field>.control>input{color:var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-body-large-font);font-weight:var(--md-sys-typescale-body-large-weight);font-size:var(--md-sys-typescale-body-large-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-large-wght), "GRAD" var(--md-sys-typescale-body-large-grad), "wdth" var(--md-sys-typescale-body-large-wdth), "ROND" var(--md-sys-typescale-body-large-rond), "opsz" var(--md-sys-typescale-body-large-opsz), "CRSV" var(--md-sys-typescale-body-large-crsv), "slnt" var(--md-sys-typescale-body-large-slnt), "FILL" var(--md-sys-typescale-body-large-fill), "HEXP" var(--md-sys-typescale-body-large-hexp);width:0;min-height:56px;box-shadow:none;box-sizing:border-box;background-color:#0000;border:none;outline:none;flex:1;padding:0;display:inline-block}.Select>.Field>.control>input::placeholder{color:var(--md-sys-color-on-surface);opacity:1}.Select>.Field>.control>input:not(.searchable){caret-color:#0000}.Select>.support{font-family:var(--md-sys-typescale-body-large-font);font-weight:var(--md-sys-typescale-body-large-weight);font-size:var(--md-sys-typescale-body-large-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-large-wght), "GRAD" var(--md-sys-typescale-body-large-grad), "wdth" var(--md-sys-typescale-body-large-wdth), "ROND" var(--md-sys-typescale-body-large-rond), "opsz" var(--md-sys-typescale-body-large-opsz), "CRSV" var(--md-sys-typescale-body-large-crsv), "slnt" var(--md-sys-typescale-body-large-slnt), "FILL" var(--md-sys-typescale-body-large-fill), "HEXP" var(--md-sys-typescale-body-large-hexp);color:var(--md-sys-color-on-surface-variant);text-align:left;padding-top:4px;box-sizing:border-box;gap:16px;width:min-content;min-width:100%;padding-inline:16px;display:flex}.Select>.Menu{z-index:1000;width:100%;position:absolute}.Select>.Menu>.MenuGroup{width:auto}.Select.error>.support{color:var(--md-sys-color-error)}.Select>select{opacity:0;display:block;position:absolute;inset:0;overflow:hidden}

package/dist/components/Slider/Slider.cjs

@@ -0,0 +1 @@
+require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../Theme/Theme.cjs"),n=require("../../utils/index.cjs"),r=require("../misc/FloatingElement/index.cjs"),i=require("../types.cjs");;/* empty css             */let a=require("react/compiler-runtime"),o=require("classnames");o=e.__toESM(o,1);let s=require("react"),c=require("react/jsx-runtime"),l=require("react-dom-event-hooks");function u(e,t,n,r=!1){let i=[];if(r){for(let r=(e+t)/2-n;r>e;r-=n)i.unshift(r);i.unshift(e);for(let r=(e+t)/2+n;r<t;r+=n)i.push(r);i.push(t)}else{for(let r=e;r<t;r+=n)i.push(r);i.push(t)}return Array.from(new Set(i))}function d(e,t){return t.reduce((t,n)=>Math.abs(n-e)<Math.abs(t-e)?n:t)}function f(e,t,n){let r=(0,a.c)(8),[i,o]=(0,s.useState)(n??e),c;r[0]===t?c=r[1]:(c=e=>{o(e),t?.(e)},r[0]=t,r[1]=c);let l=c,u,d;r[2]===e?(u=r[3],d=r[4]):(u=()=>{o(e)},d=[e],r[2]=e,r[3]=u,r[4]=d),(0,s.useEffect)(u,d);let f=e??i??n,p;return r[5]!==f||r[6]!==l?(p=[f,l],r[5]=f,r[6]=l,r[7]=p):p=r[7],p}function p(e){return typeof e==`object`&&e?.type===`range`}function m(e){let n=(0,a.c)(19),{orientation:i,value:l,hover:u}=e,{popoversContainer:d}=t.useTheme(`Slider`),[f,p]=(0,s.useState)(),m;bb0:{if(i===`horizontal`){let e;n[0]===Symbol.for(`react.memo_cache_sentinel`)?(e={allowedPlacements:[`top`,`bottom`]},n[0]=e):e=n[0],m=e;break bb0}let e;n[1]===Symbol.for(`react.memo_cache_sentinel`)?(e={allowedPlacements:[`left`,`right`]},n[1]=e):e=n[1],m=e}let h=m,g;n[2]===Symbol.for(`react.memo_cache_sentinel`)?(g=(e,t)=>{p(t)},n[2]=g):g=n[2];let _=g,v;n[3]!==u||n[4]!==f?(v=(0,o.default)(`value-indicator`,f,{visible:u}),n[3]=u,n[4]=f,n[5]=v):v=n[5];let y;n[6]!==v||n[7]!==l?(y=(0,c.jsx)(`div`,{className:v,children:l}),n[6]=v,n[7]=l,n[8]=y):y=n[8];let b;n[9]===l?b=n[10]:(b=(0,c.jsx)(`div`,{className:`SliderValueIndicator`,children:l}),n[9]=l,n[10]=b);let x;n[11]!==h||n[12]!==u||n[13]!==d||n[14]!==b?(x=(0,c.jsx)(r.default,{root:d,flip:h,autoUpdate:!0,onPlacementChange:_,open:u,children:b}),n[11]=h,n[12]=u,n[13]=d,n[14]=b,n[15]=x):x=n[15];let S;return n[16]!==y||n[17]!==x?(S=(0,c.jsxs)(c.Fragment,{children:[y,x]}),n[16]=y,n[17]=x,n[18]=S):S=n[18],S}function h(e){let{type:t=`standard`,size:r,min:a=t===`centered`?-100:0,max:h=100,step:g=1}=e,_=t===`range`?`horizontal`:e.orientation??`horizontal`,[v,y]=f(p(e)?e.startValue:e.value,p(e)?e.onStartValueChange:e.onValueChange,t===`centered`?0:a),[b,x]=f(p(e)?e.endValue:void 0,p(e)?e.onEndValueChange:void 0,h),S=(0,s.useMemo)(()=>typeof g==`number`?u(a,h,g,t===`centered`):null,[h,a,g,t]),C=(0,s.useCallback)(e=>S?d(e,[...S,(a+h)/2]):e,[h,a,S]),w=(0,s.useMemo)(()=>g===`any`?parseFloat(C(v).toFixed(2)):C(v),[C,v,g]),T=(0,s.useMemo)(()=>g===`any`?parseFloat(C(b).toFixed(2)):C(b),[C,b,g]),E=(0,s.useMemo)(()=>n.mapRange(w,a,h,0,100),[w,h,a]),D=(0,s.useMemo)(()=>n.mapRange(T,a,h,0,100),[T,h,a]),[O,k]=(0,s.useState)(!1),A=(0,s.useRef)(null),j=(0,s.useRef)(null),[M,N]=(0,s.useState)(null),P=(0,s.useCallback)(e=>{switch(e){case`handle`:case`startHandle`:case`startInactiveTrack`:return E+`%`;case`endHandle`:return D+`%`;case`inactiveTrack`:return 100-E+`%`;case`activeTrack`:return(t===`standard`?E:t===`range`?Math.abs(D-E):0)+`%`;case`negativeInactiveTrack`:return n.clamp(E,0,50)*2+`%`;case`negativeActiveTrack`:return(50-n.clamp(E,0,50))*2+`%`;case`positiveActiveTrack`:return(n.clamp(E,50,100)-50)*2+`%`;case`positiveInactiveTrack`:return(100-n.clamp(E,50,100))*2+`%`;case`endInactiveTrack`:return 100-D+`%`}return`0%`},[D,E,t]),F=(0,s.useCallback)((e,r=!0)=>{let i,o;if(e.preventDefault(),e.currentTarget instanceof Element&&e.currentTarget.setPointerCapture(e.pointerId),A.current&&j.current){if(r&&A.current.classList.add(`drag`),o=A.current.getBoundingClientRect(),_===`horizontal`)i=C(n.mapRange(e.pageX-o.x,0,o.width,a,h));else if(_===`vertical`)i=C(n.mapRange(e.pageY-o.y,o.height,0,a,h));else return;t===`standard`||t===`centered`?y(i):t===`range`&&(j.current===`start`?y(n.clamp(i,a,b)):j.current===`end`&&x(n.clamp(i,v,h)))}},[C,b,h,a,_,x,y,v,t]),I=(0,s.useCallback)(e=>{let r,i,o,s;if(A.current&&(e.stopPropagation(),e.preventDefault(),e.button!==2)){if(r=A.current.getBoundingClientRect(),t===`standard`||t===`centered`)j.current=`start`;else if(t===`range`){if(j.current=`start`,_===`horizontal`)s=C(n.mapRange(e.pageX-r.x,0,r.width,a,h));else if(_===`vertical`)s=100-C(n.mapRange(e.pageY-r.y,0,r.height,a,h));else return;i=Math.abs(s-v),o=Math.abs(s-b),i<o?j.current=`start`:j.current=`end`}N(j.current),F(e,!1)}},[C,b,h,a,F,_,v,t]),L=(0,s.useCallback)(()=>{A.current?.classList.remove(`drag`),j.current=null,N(j.current)},[]),R=(0,s.useCallback)(e=>{I(e),F(e),L()},[I,L,F]),z=(0,l.useElementEventListener)(`pointerup`,R),B=(0,l.useElementEventListener)(`pointerdown`,I),V=(0,l.useElementEventListener)(`mouseenter`,()=>k(!0)),H=(0,l.useElementEventListener)(`mouseleave`,()=>k(!1)),{saveRef:U}=(0,l.useConcatElementRef)(A,z,B,V,H),W=(0,s.useCallback)((r=!0)=>g===`any`||!e.stopIndicator?t===`standard`?(0,c.jsx)(`div`,{className:`step`,style:{"--slider-step-position":`100%`}}):null:S?.map(e=>(0,c.jsx)(`div`,{className:`step`,style:{"--slider-step-position":`${n.mapRange(e,a,h,0,100)}%`}},e)),[h,a,e.stopIndicator,g,S,t]),G=(0,s.useMemo)(()=>t===`standard`?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`activeTrack`)},className:(0,o.default)(`track active`,_),children:(0,c.jsx)(`div`,{className:`path`,children:W()})}),(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`inactiveTrack`)},className:(0,o.default)(`track inactive`,_),children:(0,c.jsx)(`div`,{className:`path`,children:W()})}),(0,c.jsx)(`div`,{className:(0,o.default)(`handleContainer`,_,{focus:M===`start`}),children:(0,c.jsx)(`div`,{style:{"--slider-handle-position":P(`handle`)},tabIndex:0,className:`handle`,children:(0,c.jsx)(m,{orientation:_,value:w,hover:O||M===`start`})})})]}):t===`centered`?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`div`,{className:`negative side`,children:[(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`negativeInactiveTrack`)},className:(0,o.default)(`track inactive negative`,_,{negativeValue:v<=(a+h)/2}),children:(0,c.jsx)(`div`,{className:`path`,children:W(!1)})}),(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`negativeActiveTrack`)},className:(0,o.default)(`track active negative`,_,{negativeValue:v<=(a+h)/2}),children:(0,c.jsx)(`div`,{className:`path`,children:W(!1)})})]}),(0,c.jsxs)(`div`,{className:`positive side`,children:[(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`positiveActiveTrack`)},className:(0,o.default)(`track active positive`,_,{positiveValue:v>=(a+h)/2}),children:(0,c.jsx)(`div`,{className:`path`,children:W(!1)})}),(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`positiveInactiveTrack`)},className:(0,o.default)(`track inactive positive`,_,{positiveValue:v>=(a+h)/2}),children:(0,c.jsx)(`div`,{className:`path`,children:W(!1)})})]}),(0,c.jsx)(`div`,{className:(0,o.default)(`handleContainer`,_,{focus:M===`start`}),children:(0,c.jsx)(`div`,{style:{"--slider-handle-position":P(`handle`)},tabIndex:0,className:`handle`,children:(0,c.jsx)(m,{orientation:_,value:w,hover:O||M===`start`})})}),(0,c.jsx)(`div`,{className:`triggerResize`,style:{"--slider-trigger-resize":P(`handle`)}})]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`startInactiveTrack`)},className:(0,o.default)(`track inactive start`,_),children:(0,c.jsx)(`div`,{className:`path`,children:W()})}),(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`activeTrack`)},className:(0,o.default)(`track active`,_),children:(0,c.jsx)(`div`,{className:`path`,children:W()})}),(0,c.jsx)(`div`,{style:{"--slider-track-size":P(`endInactiveTrack`)},className:(0,o.default)(`track inactive end`,_),children:(0,c.jsx)(`div`,{className:`path`,children:W()})}),(0,c.jsx)(`div`,{className:(0,o.default)(`handleContainer`,_,{focus:M===`start`}),children:(0,c.jsx)(`div`,{style:{"--slider-handle-position":P(`startHandle`)},tabIndex:0,className:`handle`,children:(0,c.jsx)(m,{orientation:_,value:w,hover:O||M===`start`})})}),(0,c.jsx)(`div`,{className:(0,o.default)(`handleContainer`,_,{focus:M===`end`}),children:(0,c.jsx)(`div`,{style:{"--slider-handle-position":P(`endHandle`)},tabIndex:0,className:`handle end`,children:(0,c.jsx)(m,{orientation:_,value:T,hover:O||M===`end`})})})]}),[T,w,M,P,O,h,a,_,W,v,t]);return(0,l.useDocumentEventListener)(`pointerup`,L),(0,l.useDocumentEventListener)(`pointermove`,F),(0,c.jsx)(`div`,{ref:U,className:(0,o.default)(`Slider`,t,_,i.getComponentSizeName(r,`extra-small`)),children:G})}exports.default=h,exports.usePropValue=f;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,26 @@
+import { getComponentSizeName } from '../types';
+export interface DefaultSliderProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: "standard" | "centered";
+    orientation?: "horizontal" | "vertical";
+    size?: Parameters<typeof getComponentSizeName>[0];
+    inset?: React.ReactNode;
+    valueIndicator?: boolean;
+    stopIndicator?: boolean;
+    min?: number;
+    max?: number;
+    step?: number | "any";
+    value?: number;
+    onValueChange?: (value: number) => void;
+}
+export interface RangeSliderProps extends Omit<DefaultSliderProps, "type" | "orientation" | "value" | "onValueChange"> {
+    type: "range";
+    orientation?: "horizontal";
+    startValue?: number;
+    endValue?: number;
+    onStartValueChange?: (value: number) => void;
+    onEndValueChange?: (value: number) => void;
+}
+export type SliderProps = DefaultSliderProps | RangeSliderProps;
+export declare function usePropValue<Value>(prop: Value, updater?: ((value: Value) => void) | undefined): [Value, (value: Value) => void];
+export declare function usePropValue<Value = undefined>(prop: Value | undefined, updater: ((value: Value) => void) | undefined, defaultValue: NonNullable<Value>): [NonNullable<Value>, (value: Value) => void];
+export default function Slider(props: SliderProps): import('react').JSX.Element;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,342 @@
+import { useTheme as e } from "../Theme/Theme.js";
+import { clamp as t, mapRange as n } from "../../utils/index.js";
+import r from "../misc/FloatingElement/index.js";
+import { getComponentSizeName as i } from "../types.js";
+import './style.css';/* empty css           */
+import { c as a } from "react/compiler-runtime";
+import o from "classnames";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useConcatElementRef as h, useDocumentEventListener as g, useElementEventListener as _ } from "react-dom-event-hooks";
+//#region lib/components/Slider/Slider.tsx
+function v(e, t, n, r = !1) {
+	let i = [];
+	if (r) {
+		for (let r = (e + t) / 2 - n; r > e; r -= n) i.unshift(r);
+		i.unshift(e);
+		for (let r = (e + t) / 2 + n; r < t; r += n) i.push(r);
+		i.push(t);
+	} else {
+		for (let r = e; r < t; r += n) i.push(r);
+		i.push(t);
+	}
+	return Array.from(new Set(i));
+}
+function y(e, t) {
+	return t.reduce((t, n) => Math.abs(n - e) < Math.abs(t - e) ? n : t);
+}
+function b(e, t, n) {
+	let r = a(8), [i, o] = d(n ?? e), s;
+	r[0] === t ? s = r[1] : (s = (e) => {
+		o(e), t?.(e);
+	}, r[0] = t, r[1] = s);
+	let l = s, u, f;
+	r[2] === e ? (u = r[3], f = r[4]) : (u = () => {
+		o(e);
+	}, f = [e], r[2] = e, r[3] = u, r[4] = f), c(u, f);
+	let p = e ?? i ?? n, m;
+	return r[5] !== p || r[6] !== l ? (m = [p, l], r[5] = p, r[6] = l, r[7] = m) : m = r[7], m;
+}
+function x(e) {
+	return typeof e == "object" && e?.type === "range";
+}
+function S(t) {
+	let n = a(19), { orientation: i, value: s, hover: c } = t, { popoversContainer: l } = e("Slider"), [u, h] = d(), g;
+	bb0: {
+		if (i === "horizontal") {
+			let e;
+			n[0] === Symbol.for("react.memo_cache_sentinel") ? (e = { allowedPlacements: ["top", "bottom"] }, n[0] = e) : e = n[0], g = e;
+			break bb0;
+		}
+		let e;
+		n[1] === Symbol.for("react.memo_cache_sentinel") ? (e = { allowedPlacements: ["left", "right"] }, n[1] = e) : e = n[1], g = e;
+	}
+	let _ = g, v;
+	n[2] === Symbol.for("react.memo_cache_sentinel") ? (v = (e, t) => {
+		h(t);
+	}, n[2] = v) : v = n[2];
+	let y = v, b;
+	n[3] !== c || n[4] !== u ? (b = o("value-indicator", u, { visible: c }), n[3] = c, n[4] = u, n[5] = b) : b = n[5];
+	let x;
+	n[6] !== b || n[7] !== s ? (x = /* @__PURE__ */ p("div", {
+		className: b,
+		children: s
+	}), n[6] = b, n[7] = s, n[8] = x) : x = n[8];
+	let S;
+	n[9] === s ? S = n[10] : (S = /* @__PURE__ */ p("div", {
+		className: "SliderValueIndicator",
+		children: s
+	}), n[9] = s, n[10] = S);
+	let C;
+	n[11] !== _ || n[12] !== c || n[13] !== l || n[14] !== S ? (C = /* @__PURE__ */ p(r, {
+		root: l,
+		flip: _,
+		autoUpdate: !0,
+		onPlacementChange: y,
+		open: c,
+		children: S
+	}), n[11] = _, n[12] = c, n[13] = l, n[14] = S, n[15] = C) : C = n[15];
+	let w;
+	return n[16] !== x || n[17] !== C ? (w = /* @__PURE__ */ m(f, { children: [x, C] }), n[16] = x, n[17] = C, n[18] = w) : w = n[18], w;
+}
+function C(e) {
+	let { type: r = "standard", size: a, min: c = r === "centered" ? -100 : 0, max: C = 100, step: w = 1 } = e, T = r === "range" ? "horizontal" : e.orientation ?? "horizontal", [E, D] = b(x(e) ? e.startValue : e.value, x(e) ? e.onStartValueChange : e.onValueChange, r === "centered" ? 0 : c), [O, k] = b(x(e) ? e.endValue : void 0, x(e) ? e.onEndValueChange : void 0, C), A = l(() => typeof w == "number" ? v(c, C, w, r === "centered") : null, [
+		C,
+		c,
+		w,
+		r
+	]), j = s((e) => A ? y(e, [...A, (c + C) / 2]) : e, [
+		C,
+		c,
+		A
+	]), M = l(() => w === "any" ? parseFloat(j(E).toFixed(2)) : j(E), [
+		j,
+		E,
+		w
+	]), N = l(() => w === "any" ? parseFloat(j(O).toFixed(2)) : j(O), [
+		j,
+		O,
+		w
+	]), P = l(() => n(M, c, C, 0, 100), [
+		M,
+		C,
+		c
+	]), F = l(() => n(N, c, C, 0, 100), [
+		N,
+		C,
+		c
+	]), [I, L] = d(!1), R = u(null), z = u(null), [B, V] = d(null), H = s((e) => {
+		switch (e) {
+			case "handle":
+			case "startHandle":
+			case "startInactiveTrack": return P + "%";
+			case "endHandle": return F + "%";
+			case "inactiveTrack": return 100 - P + "%";
+			case "activeTrack": return (r === "standard" ? P : r === "range" ? Math.abs(F - P) : 0) + "%";
+			case "negativeInactiveTrack": return t(P, 0, 50) * 2 + "%";
+			case "negativeActiveTrack": return (50 - t(P, 0, 50)) * 2 + "%";
+			case "positiveActiveTrack": return (t(P, 50, 100) - 50) * 2 + "%";
+			case "positiveInactiveTrack": return (100 - t(P, 50, 100)) * 2 + "%";
+			case "endInactiveTrack": return 100 - F + "%";
+		}
+		return "0%";
+	}, [
+		F,
+		P,
+		r
+	]), U = s((e, i = !0) => {
+		let a, o;
+		if (e.preventDefault(), e.currentTarget instanceof Element && e.currentTarget.setPointerCapture(e.pointerId), R.current && z.current) {
+			if (i && R.current.classList.add("drag"), o = R.current.getBoundingClientRect(), T === "horizontal") a = j(n(e.pageX - o.x, 0, o.width, c, C));
+			else if (T === "vertical") a = j(n(e.pageY - o.y, o.height, 0, c, C));
+			else return;
+			r === "standard" || r === "centered" ? D(a) : r === "range" && (z.current === "start" ? D(t(a, c, O)) : z.current === "end" && k(t(a, E, C)));
+		}
+	}, [
+		j,
+		O,
+		C,
+		c,
+		T,
+		k,
+		D,
+		E,
+		r
+	]), W = s((e) => {
+		let t, i, a, o;
+		if (R.current && (e.stopPropagation(), e.preventDefault(), e.button !== 2)) {
+			if (t = R.current.getBoundingClientRect(), r === "standard" || r === "centered") z.current = "start";
+			else if (r === "range") {
+				if (z.current = "start", T === "horizontal") o = j(n(e.pageX - t.x, 0, t.width, c, C));
+				else if (T === "vertical") o = 100 - j(n(e.pageY - t.y, 0, t.height, c, C));
+				else return;
+				i = Math.abs(o - E), a = Math.abs(o - O), i < a ? z.current = "start" : z.current = "end";
+			}
+			V(z.current), U(e, !1);
+		}
+	}, [
+		j,
+		O,
+		C,
+		c,
+		U,
+		T,
+		E,
+		r
+	]), G = s(() => {
+		R.current?.classList.remove("drag"), z.current = null, V(z.current);
+	}, []), K = s((e) => {
+		W(e), U(e), G();
+	}, [
+		W,
+		G,
+		U
+	]), q = _("pointerup", K), J = _("pointerdown", W), Y = _("mouseenter", () => L(!0)), X = _("mouseleave", () => L(!1)), { saveRef: Z } = h(R, q, J, Y, X), Q = s((t = !0) => w === "any" || !e.stopIndicator ? r === "standard" ? /* @__PURE__ */ p("div", {
+		className: "step",
+		style: { "--slider-step-position": "100%" }
+	}) : null : A?.map((e) => /* @__PURE__ */ p("div", {
+		className: "step",
+		style: { "--slider-step-position": `${n(e, c, C, 0, 100)}%` }
+	}, e)), [
+		C,
+		c,
+		e.stopIndicator,
+		w,
+		A,
+		r
+	]), $ = l(() => r === "standard" ? /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p("div", {
+			style: { "--slider-track-size": H("activeTrack") },
+			className: o("track active", T),
+			children: /* @__PURE__ */ p("div", {
+				className: "path",
+				children: Q()
+			})
+		}),
+		/* @__PURE__ */ p("div", {
+			style: { "--slider-track-size": H("inactiveTrack") },
+			className: o("track inactive", T),
+			children: /* @__PURE__ */ p("div", {
+				className: "path",
+				children: Q()
+			})
+		}),
+		/* @__PURE__ */ p("div", {
+			className: o("handleContainer", T, { focus: B === "start" }),
+			children: /* @__PURE__ */ p("div", {
+				style: { "--slider-handle-position": H("handle") },
+				tabIndex: 0,
+				className: "handle",
+				children: /* @__PURE__ */ p(S, {
+					orientation: T,
+					value: M,
+					hover: I || B === "start"
+				})
+			})
+		})
+	] }) : r === "centered" ? /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ m("div", {
+			className: "negative side",
+			children: [/* @__PURE__ */ p("div", {
+				style: { "--slider-track-size": H("negativeInactiveTrack") },
+				className: o("track inactive negative", T, { negativeValue: E <= (c + C) / 2 }),
+				children: /* @__PURE__ */ p("div", {
+					className: "path",
+					children: Q(!1)
+				})
+			}), /* @__PURE__ */ p("div", {
+				style: { "--slider-track-size": H("negativeActiveTrack") },
+				className: o("track active negative", T, { negativeValue: E <= (c + C) / 2 }),
+				children: /* @__PURE__ */ p("div", {
+					className: "path",
+					children: Q(!1)
+				})
+			})]
+		}),
+		/* @__PURE__ */ m("div", {
+			className: "positive side",
+			children: [/* @__PURE__ */ p("div", {
+				style: { "--slider-track-size": H("positiveActiveTrack") },
+				className: o("track active positive", T, { positiveValue: E >= (c + C) / 2 }),
+				children: /* @__PURE__ */ p("div", {
+					className: "path",
+					children: Q(!1)
+				})
+			}), /* @__PURE__ */ p("div", {
+				style: { "--slider-track-size": H("positiveInactiveTrack") },
+				className: o("track inactive positive", T, { positiveValue: E >= (c + C) / 2 }),
+				children: /* @__PURE__ */ p("div", {
+					className: "path",
+					children: Q(!1)
+				})
+			})]
+		}),
+		/* @__PURE__ */ p("div", {
+			className: o("handleContainer", T, { focus: B === "start" }),
+			children: /* @__PURE__ */ p("div", {
+				style: { "--slider-handle-position": H("handle") },
+				tabIndex: 0,
+				className: "handle",
+				children: /* @__PURE__ */ p(S, {
+					orientation: T,
+					value: M,
+					hover: I || B === "start"
+				})
+			})
+		}),
+		/* @__PURE__ */ p("div", {
+			className: "triggerResize",
+			style: { "--slider-trigger-resize": H("handle") }
+		})
+	] }) : /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p("div", {
+			style: { "--slider-track-size": H("startInactiveTrack") },
+			className: o("track inactive start", T),
+			children: /* @__PURE__ */ p("div", {
+				className: "path",
+				children: Q()
+			})
+		}),
+		/* @__PURE__ */ p("div", {
+			style: { "--slider-track-size": H("activeTrack") },
+			className: o("track active", T),
+			children: /* @__PURE__ */ p("div", {
+				className: "path",
+				children: Q()
+			})
+		}),
+		/* @__PURE__ */ p("div", {
+			style: { "--slider-track-size": H("endInactiveTrack") },
+			className: o("track inactive end", T),
+			children: /* @__PURE__ */ p("div", {
+				className: "path",
+				children: Q()
+			})
+		}),
+		/* @__PURE__ */ p("div", {
+			className: o("handleContainer", T, { focus: B === "start" }),
+			children: /* @__PURE__ */ p("div", {
+				style: { "--slider-handle-position": H("startHandle") },
+				tabIndex: 0,
+				className: "handle",
+				children: /* @__PURE__ */ p(S, {
+					orientation: T,
+					value: M,
+					hover: I || B === "start"
+				})
+			})
+		}),
+		/* @__PURE__ */ p("div", {
+			className: o("handleContainer", T, { focus: B === "end" }),
+			children: /* @__PURE__ */ p("div", {
+				style: { "--slider-handle-position": H("endHandle") },
+				tabIndex: 0,
+				className: "handle end",
+				children: /* @__PURE__ */ p(S, {
+					orientation: T,
+					value: N,
+					hover: I || B === "end"
+				})
+			})
+		})
+	] }), [
+		N,
+		M,
+		B,
+		H,
+		I,
+		C,
+		c,
+		T,
+		Q,
+		E,
+		r
+	]);
+	return g("pointerup", G), g("pointermove", U), /* @__PURE__ */ p("div", {
+		ref: Z,
+		className: o("Slider", r, T, i(a, "extra-small")),
+		children: $
+	});
+}
+//#endregion
+export { C as default, b as usePropValue };

package/dist/components/Slider/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./Slider.cjs");exports.default=e.default;

package/dist/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export { default, type SliderProps } from './Slider';

package/dist/components/Slider/index.js

@@ -0,0 +1 @@
+export { default } from "./Slider.js";

package/dist/components/Slider/style.css

@@ -0,0 +1 @@
+.FloatingElement>.SliderValueIndicator{font-family:var(--md-comp-slider-value-indicator-label-label-text-font);font-weight:var(--md-comp-slider-value-indicator-label-label-text-weight);font-size:var(--md-comp-slider-value-indicator-label-label-text-size);letter-spacing:var(--md-comp-slider-value-indicator-label-label-text-tracking);line-height:var(--md-comp-slider-value-indicator-label-label-text-line-height);font-variation-settings:"wght" var(--md-comp-slider-value-indicator-label-label-text-wght), "GRAD" var(--md-comp-slider-value-indicator-label-label-text-grad), "wdth" var(--md-comp-slider-value-indicator-label-label-text-wdth), "ROND" var(--md-comp-slider-value-indicator-label-label-text-rond), "opsz" var(--md-comp-slider-value-indicator-label-label-text-opsz), "CRSV" var(--md-comp-slider-value-indicator-label-label-text-crsv), "slnt" var(--md-comp-slider-value-indicator-label-label-text-slnt), "FILL" var(--md-comp-slider-value-indicator-label-label-text-fill), "HEXP" var(--md-comp-slider-value-indicator-label-label-text-hexp);visibility:hidden;padding:var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);pointer-events:none;user-select:none;margin:4px}.Slider{cursor:pointer;box-sizing:border-box;--slider-gap-space:var(--md-sys-measurement-space100);display:flex;position:relative}.Slider>.handleContainer>.handle>.value-indicator.visible{opacity:1;transform:scale(1)}.Slider:not(.drag)>.track,.Slider:not(.drag)>.side>.track,.Slider:not(.drag)>.handleContainer>.handle,.Slider:not(.drag)>.triggerResize{transition:inset var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), width var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), height var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), margin var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing)}.Slider.drag>.track,.Slider.drag>.side>.track,.Slider.drag>.handleContainer>.handle,.Slider.drag>.triggerResize{transition:inset var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), width var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), height var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), margin var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing);transition-duration:.1s}.Slider>.track>.path,.Slider>.side>.track>.path,.Slider>.handleContainer>.handle:before{transition:inset var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), width var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), height var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), margin var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), outline var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), outline-offset var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing)}.Slider.extra-small{--md-comp-slider-active-track-height:var(--md-comp-slider-xsmall-active-track-height);--md-comp-slider-inactive-track-height:var(--md-comp-slider-xsmall-inactive-track-height);--md-comp-slider-handle-height:var(--md-comp-slider-xsmall-active-handle-height);--md-comp-slider-active-track-shape-leading:var(--md-comp-slider-xsmall-active-track-shape-leading);--md-comp-slider-inactive-track-shape-trailing:var(--md-comp-slider-xsmall-inactive-track-shape-trailing)}.Slider.small{--md-comp-slider-active-track-height:var(--md-comp-slider-small-active-track-height);--md-comp-slider-inactive-track-height:var(--md-comp-slider-small-inactive-track-height);--md-comp-slider-handle-height:var(--md-comp-slider-small-active-handle-height);--md-comp-slider-active-track-shape-leading:var(--md-comp-slider-small-active-track-shape-leading);--md-comp-slider-inactive-track-shape-trailing:var(--md-comp-slider-small-inactive-track-shape-trailing)}.Slider.medium{--md-comp-slider-active-track-height:var(--md-comp-slider-medium-active-track-height);--md-comp-slider-inactive-track-height:var(--md-comp-slider-medium-inactive-track-height);--md-comp-slider-handle-height:var(--md-comp-slider-medium-active-handle-height);--md-comp-slider-active-track-shape-leading:var(--md-comp-slider-medium-active-track-shape-leading);--md-comp-slider-inactive-track-shape-trailing:var(--md-comp-slider-medium-inactive-track-shape-trailing);--md-comp-slider-icon-size:var(--md-comp-slider-medium-icon-size)}.Slider.large{--md-comp-slider-active-track-height:var(--md-comp-slider-large-active-track-height);--md-comp-slider-inactive-track-height:var(--md-comp-slider-large-inactive-track-height);--md-comp-slider-handle-height:var(--md-comp-slider-large-active-handle-height);--md-comp-slider-active-track-shape-leading:var(--md-comp-slider-large-active-track-shape-leading);--md-comp-slider-inactive-track-shape-trailing:var(--md-comp-slider-large-inactive-track-shape-trailing);--md-comp-slider-icon-size:var(--md-comp-slider-large-icon-size)}.Slider.extra-large{--md-comp-slider-active-track-height:var(--md-comp-slider-xlarge-active-track-height);--md-comp-slider-inactive-track-height:var(--md-comp-slider-xlarge-inactive-track-height);--md-comp-slider-handle-height:var(--md-comp-slider-xlarge-active-handle-height);--md-comp-slider-active-track-shape-leading:var(--md-comp-slider-xlarge-active-track-shape-leading);--md-comp-slider-inactive-track-shape-trailing:var(--md-comp-slider-xlarge-inactive-track-shape-trailing);--md-comp-slider-icon-size:var(--md-comp-slider-xlarge-icon-size)}.Slider>.triggerResize{pointer-events:none;position:absolute}.Slider.horizontal{margin-inline:var(--slider-gap-space)}.Slider.horizontal:before{content:"";width:100%;left:0;top:calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2 * -1);bottom:calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2 * -1);position:absolute}.Slider.horizontal>.triggerResize{width:var(--slider-trigger-resize)}.Slider.vertical{flex-direction:column-reverse}.Slider.vertical:before{content:"";height:100%;top:0;left:calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2 * -1);right:calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2 * -1);position:absolute}.Slider.vertical>.triggerResize{height:var(--slider-trigger-resize)}.Slider>.track,.Slider>.side>.track{box-sizing:border-box}.Slider>.track.horizontal,.Slider>.side>.track.horizontal{width:var(--slider-track-size);height:var(--md-comp-slider-track-height);margin-block:calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2)}.Slider>.track.horizontal>.path,.Slider>.side>.track.horizontal>.path{height:100%}.Slider>.track.horizontal>.path>.step,.Slider>.side>.track.horizontal>.path>.step{top:50%;left:var(--slider-step-position)}.Slider>.track.vertical,.Slider>.side>.track.vertical{width:var(--md-comp-slider-track-height);height:var(--slider-track-size);margin-inline:calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2)}.Slider>.track.vertical>.path,.Slider>.side>.track.vertical>.path{width:100%}.Slider>.track.vertical>.path>.step,.Slider>.side>.track.vertical>.path>.step{left:50%;bottom:var(--slider-step-position)}.Slider>.track.active,.Slider>.side>.track.active{--md-comp-slider-track-height:var(--md-comp-slider-active-track-height)}.Slider>.track.active>.path,.Slider>.side>.track.active>.path{background-color:var(--md-comp-slider-active-track-color);color:var(--md-comp-slider-active-stop-indicator-container-color)}.Slider>.track.inactive,.Slider>.side>.track.inactive{--md-comp-slider-track-height:var(--md-comp-slider-active-track-height)}.Slider>.track.inactive>.path,.Slider>.side>.track.inactive>.path{background-color:var(--md-comp-slider-inactive-track-color);color:var(--md-comp-slider-inactive-stop-indicator-container-color)}.Slider>.track>.path,.Slider>.side>.track>.path{clip-path:inset(-1px);box-sizing:border-box}.Slider>.track>.path>.step,.Slider>.side>.track>.path>.step{transition:inset var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing);position:absolute}.Slider>.track>.path>.step:before,.Slider>.side>.track>.path>.step:before{border-radius:var(--md-sys-shape-corner-full);content:"";width:var(--md-comp-slider-stop-indicator-size);height:var(--md-comp-slider-stop-indicator-size);background-color:currentColor;position:absolute;inset:-2px}.Slider>.handleContainer{pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.Slider>.handleContainer.focus{--md-comp-slider-handle-width:var(--md-comp-slider-focus-handle-width)}.Slider>.handleContainer.horizontal>.handle{left:var(--slider-handle-position);height:var(--md-comp-slider-handle-height)}.Slider>.handleContainer.horizontal>.handle:before{width:var(--md-comp-slider-handle-width);height:var(--md-comp-slider-handle-height)}.Slider>.handleContainer.horizontal>.handle>.value-indicator.top{bottom:calc(100% + var(--md-sys-measurement-space50));transform-origin:bottom}.Slider>.handleContainer.horizontal>.handle>.value-indicator.bottom{top:calc(100% + var(--md-sys-measurement-space50));transform-origin:top}.Slider>.handleContainer.vertical>.handle{bottom:var(--slider-handle-position)}.Slider>.handleContainer.vertical>.handle:before{height:var(--md-comp-slider-handle-width);width:var(--md-comp-slider-handle-height)}.Slider>.handleContainer.vertical>.handle>.value-indicator.left{right:calc(100% + var(--md-sys-measurement-space50));transform-origin:100%}.Slider>.handleContainer.vertical>.handle>.value-indicator.right{left:calc(100% + var(--md-sys-measurement-space50));transform-origin:0}.Slider>.handleContainer>.handle{z-index:1;pointer-events:all;justify-content:center;align-items:center;display:flex;position:absolute}.Slider>.handleContainer>.handle:before{content:"";background-color:var(--md-comp-slider-handle-color);border-radius:var(--md-comp-slider-handle-shape);outline:0px solid var(--md-sys-color-secondary);outline-offset:4px;z-index:1;display:block;position:absolute}.Slider>.handleContainer>.handle:focus:before{--md-comp-slider-handle-width:var(--md-comp-slider-focus-handle-width);outline-width:4px}.Slider>.handleContainer>.handle>.value-indicator{font-family:var(--md-comp-slider-value-indicator-label-label-text-font);font-weight:var(--md-comp-slider-value-indicator-label-label-text-weight);font-size:var(--md-comp-slider-value-indicator-label-label-text-size);letter-spacing:var(--md-comp-slider-value-indicator-label-label-text-tracking);line-height:var(--md-comp-slider-value-indicator-label-label-text-line-height);font-variation-settings:"wght" var(--md-comp-slider-value-indicator-label-label-text-wght), "GRAD" var(--md-comp-slider-value-indicator-label-label-text-grad), "wdth" var(--md-comp-slider-value-indicator-label-label-text-wdth), "ROND" var(--md-comp-slider-value-indicator-label-label-text-rond), "opsz" var(--md-comp-slider-value-indicator-label-label-text-opsz), "CRSV" var(--md-comp-slider-value-indicator-label-label-text-crsv), "slnt" var(--md-comp-slider-value-indicator-label-label-text-slnt), "FILL" var(--md-comp-slider-value-indicator-label-label-text-fill), "HEXP" var(--md-comp-slider-value-indicator-label-label-text-hexp);background-color:var(--md-comp-slider-value-indicator-container-color);color:var(--md-comp-slider-value-indicator-label-label-text-color);border-radius:var(--md-sys-shape-corner-full);padding:var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);opacity:0;pointer-events:none;user-select:none;transition:transform var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), opacity var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing);position:absolute;transform:scale(0)}.Slider.standard>.track.active.horizontal>.path{border-top-left-radius:var(--md-comp-slider-active-track-shape-leading);border-bottom-left-radius:var(--md-comp-slider-active-track-shape-leading);width:calc(100% - var(--md-comp-slider-handle-width) / 2);margin-left:calc(var(--md-comp-slider-active-handle-leading-space) * -1);border-top-right-radius:2px;border-bottom-right-radius:2px}.Slider.standard>.track.active.vertical>.path{border-bottom-left-radius:var(--md-comp-slider-active-track-shape-leading);border-bottom-right-radius:var(--md-comp-slider-active-track-shape-leading);margin-top:calc(var(--md-comp-slider-handle-width) / 2 + var(--md-comp-slider-active-handle-leading-space));height:calc(100% - var(--md-comp-slider-handle-width) / 2);border-top-left-radius:2px;border-top-right-radius:2px}.Slider.standard>.track.inactive.horizontal>.path{border-top-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-bottom-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);margin-left:calc(var(--md-comp-slider-handle-width) / 2 + var(--md-comp-slider-active-handle-trailing-space));width:calc(100% - var(--md-comp-slider-handle-width) / 2);border-top-left-radius:2px;border-bottom-left-radius:2px}.Slider.standard>.track.inactive.vertical>.path{border-top-left-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-top-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);margin-top:calc((var(--md-comp-slider-handle-width) / 2 + var(--md-comp-slider-active-handle-trailing-space) / 2) * -1);height:calc(100% - var(--md-comp-slider-handle-width) / 2);border-bottom-right-radius:2px;border-bottom-left-radius:2px}.Slider.centered.horizontal>.side{width:50%}.Slider.centered.vertical>.side{flex-direction:column-reverse;height:50%}.Slider.centered>.side{display:flex}.Slider.centered>.side>.track.negative.inactive:not(.negativeValue).horizontal>.path{width:calc(100% + var(--slider-gap-space) / 2);margin-right:calc(var(--slider-gap-space) / 2)}.Slider.centered>.side>.track.negative.inactive:not(.negativeValue).vertical>.path{height:calc(100% + var(--slider-gap-space) / 2);margin-top:calc(var(--slider-gap-space) / 2)}.Slider.centered>.side>.track.negative.inactive.horizontal>.path{border-top-left-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-bottom-left-radius:var(--md-comp-slider-inactive-track-shape-trailing);width:calc(100% - var(--md-comp-slider-handle-width) / 2);margin-left:calc(var(--slider-gap-space) * -1);border-top-right-radius:2px;border-bottom-right-radius:2px}.Slider.centered>.side>.track.negative.inactive.vertical>.path{border-bottom-left-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-bottom-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);margin-top:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));height:calc(100% - var(--md-comp-slider-handle-width) / 2);border-top-left-radius:2px;border-top-right-radius:2px}.Slider.centered>.side>.track.negative.active>.path{border-radius:2px}.Slider.centered>.side>.track.negative.active.horizontal>.path{margin-left:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));margin-right:calc(var(--slider-gap-space) / 2)}.Slider.centered>.side>.track.negative.active.vertical>.path{height:calc(100% - var(--md-comp-slider-handle-width) / 2 - var(--slider-gap-space) - var(--slider-gap-space) / 2);margin-bottom:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));margin-top:calc(var(--slider-gap-space) / 2)}.Slider.centered>.side>.track.positive.active>.path{border-radius:2px}.Slider.centered>.side>.track.positive.active.horizontal>.path{margin-right:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));margin-left:calc(var(--slider-gap-space) / 2)}.Slider.centered>.side>.track.positive.active.vertical>.path{height:calc(100% - var(--md-comp-slider-handle-width) / 2 - var(--slider-gap-space) - var(--slider-gap-space) / 2);margin-top:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space))}.Slider.centered>.side>.track.positive.inactive:not(.positiveValue).horizontal>.path{width:calc(100% + var(--slider-gap-space) / 2);margin-left:calc(var(--slider-gap-space) / 2)}.Slider.centered>.side>.track.positive.inactive:not(.positiveValue).vertical>.path{height:calc(100% - var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));margin-top:calc(var(--slider-gap-space) * -1)}.Slider.centered>.side>.track.positive.inactive.horizontal>.path{border-top-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-bottom-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);width:calc(100% - var(--md-comp-slider-handle-width) / 2);margin-left:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));border-top-left-radius:2px;border-bottom-left-radius:2px}.Slider.centered>.side>.track.positive.inactive.vertical>.path{border-top-left-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-top-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);height:calc(100% - var(--md-comp-slider-handle-width) / 2 - 0px);margin-top:calc(var(--slider-gap-space) * -1);border-bottom-right-radius:2px;border-bottom-left-radius:2px}.Slider.range>.track.active.horizontal>.path{width:calc(100% - var(--md-comp-slider-handle-width) / 2 - 12px - var(--md-comp-slider-handle-width) / 2);margin-left:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));border-radius:2px}.Slider.range>.track.start.inactive.horizontal>.path{border-top-left-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-bottom-left-radius:var(--md-comp-slider-inactive-track-shape-trailing);width:calc(100% - var(--md-comp-slider-handle-width) / 2);margin-left:calc(var(--slider-gap-space) * -1);border-top-right-radius:2px;border-bottom-right-radius:2px}.Slider.range>.track.end.inactive.horizontal>.path{border-top-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);border-bottom-right-radius:var(--md-comp-slider-inactive-track-shape-trailing);width:calc(100% - var(--md-comp-slider-handle-width) / 2);margin-left:calc(var(--md-comp-slider-handle-width) / 2 + var(--slider-gap-space));border-top-left-radius:2px;border-bottom-left-radius:2px}

package/dist/components/TextField/TextField.cjs

@@ -0,0 +1 @@
+const e=require("../misc/OrderedCollection/index.cjs"),t=require("./TextField.render.cjs");let n=require("react/compiler-runtime"),r=require("react/jsx-runtime");function i(i){let a=(0,n.c)(4);if(e.useOrderedCollection()){let t;return a[0]===i?t=a[1]:(t=(0,r.jsx)(e.OrderedCollectionChild,{name:`TextField`,content:i}),a[0]=i,a[1]=t),t}let o;return a[2]===i?o=a[3]:(o=(0,r.jsx)(t.default,{...i}),a[2]=i,a[3]=o),o}exports.default=i;

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,2 @@
+import { TextFieldProps } from './TextField.render';
+export default function TextField(props: TextFieldProps): import('react').JSX.Element;

package/dist/components/TextField/TextField.js

@@ -0,0 +1,19 @@
+import { OrderedCollectionChild as e, useOrderedCollection as t } from "../misc/OrderedCollection/index.js";
+import n from "./TextField.render.js";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+//#region lib/components/TextField/TextField.tsx
+function a(a) {
+	let o = r(4);
+	if (t()) {
+		let t;
+		return o[0] === a ? t = o[1] : (t = /* @__PURE__ */ i(e, {
+			name: "TextField",
+			content: a
+		}), o[0] = a, o[1] = t), t;
+	}
+	let s;
+	return o[2] === a ? s = o[3] : (s = /* @__PURE__ */ i(n, { ...a }), o[2] = a, o[3] = s), s;
+}
+//#endregion
+export { a as default };

package/dist/components/TextField/TextField.render.cjs

@@ -0,0 +1 @@
+require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../Icon/Icon.cjs"),n=require("../../utils/index.cjs"),r=require("../Button/icon/index.cjs");require("../Icon/index.cjs");const i=require("../containers/FilledField/index.cjs"),a=require("../containers/OutlinedField/index.cjs");;/* empty css             */let o=require("classnames");o=e.__toESM(o,1);let s=require("react"),c=require("react/jsx-runtime");function l(e){let{shape:l,label:u,onValueChange:d,onChange:f,onInvalid:p,value:m,supportingText:h,counter:g=!0,clearable:_,leadingIcon:v,trailingIcon:y,prefix:b,suffix:x,...S}=e,C=(0,s.useRef)(null),[w,T]=(0,s.useState)(m??e.defaultValue??``),E=m??w,D=!!E.length,[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)(!1),M=u?u+(e.required?`*`:``):void 0,[N,P]=(0,s.useState)(),[F,I]=(0,s.useState)(0),L=N??h,R=(0,s.useCallback)(t=>{let r;e.maxLength&&g===`word`?(r=t.match(/\b\w+\b/g)?.length??0,r>=e.maxLength&&(t=n.getMaxWords(t,e.maxLength)),I(r)):e.maxLength&&(t=t.slice(0,e.maxLength),I(t.length)),m===void 0&&T(t),P(void 0),d?.(t)},[m,g,d,e.maxLength]),z=(0,s.useCallback)(e=>{e.preventDefault(),R(``)},[R]),B=(0,s.useMemo)(()=>e.type===`password`?(0,c.jsx)(r.default,{selectable:!0,selected:A,icon:e=>y??(e?`visibility_off`:`visibility`),color:`standard`,onClick:()=>j(!A),className:`trailing`}):_?(0,c.jsx)(r.default,{icon:y??`close`,color:`standard`,onClick:z,className:`trailing`}):N?(0,c.jsx)(t.default,{name:`error`,fill:!0,className:`error`}):t.convertIconDefinition(y),[e.type,A,_,y,z,N]),V=(0,s.useMemo)(()=>(0,c.jsx)(`input`,{...S,ref:C,type:e.type===`password`?A?`text`:`password`:e.type,required:e.required,onFocus:()=>k(!0),onBlur:()=>k(!1),value:E,onChange:e=>{R(e.target.value),f?.(e)},maxLength:e.maxLength&&g===`word`?void 0:e.maxLength,onInvalid:e=>{e.preventDefault(),P(e.currentTarget.validationMessage),p?.(e),e.currentTarget.focus()},title:``}),[S,e.type,e.required,e.maxLength,A,E,g,R,f,p]),H=(0,s.useMemo)(()=>l===`filled`?(0,c.jsxs)(c.Fragment,{children:[t.convertIconDefinition(v),(0,c.jsxs)(`div`,{className:`container`,onMouseDown:()=>requestAnimationFrame(()=>C.current?.focus()),children:[u&&(0,c.jsx)(`span`,{className:`label`,children:M}),(0,c.jsxs)(`div`,{className:(0,o.default)(`content`,{prefix:b,suffix:x}),children:[b&&(0,c.jsx)(`span`,{className:`prefix`,children:b}),V,x&&(0,c.jsx)(`span`,{className:`suffix`,children:x})]})]}),B]}):(0,c.jsxs)(c.Fragment,{children:[t.convertIconDefinition(v),(0,c.jsxs)(`div`,{className:(0,o.default)(`content`,{prefix:b,suffix:x}),children:[b&&(0,c.jsx)(`span`,{className:`prefix`,children:b}),V,x&&(0,c.jsx)(`span`,{className:`suffix`,children:x})]}),B]}),[M,V,u,v,b,l,x,B]);return(0,c.jsxs)(`div`,{className:(0,o.default)(`TextField`,e.type,{error:N}),children:[l===`filled`?(0,c.jsx)(i.default,{label:M,filled:D||!!e.prefix,focus:O,error:!!N,className:(0,o.default)({leadingIcon:v,trailingIcon:B}),children:H}):(0,c.jsx)(a.default,{label:M,filled:D||!!e.prefix,focus:O,error:!!N,className:(0,o.default)({leadingIcon:v,trailingIcon:B}),children:H}),(L||e.maxLength&&g)&&(0,c.jsxs)(`div`,{className:`support`,children:[(0,c.jsx)(`div`,{className:`message`,children:L}),e.maxLength&&g&&(0,c.jsxs)(`div`,{className:`counter`,children:[F,` / `,e.maxLength]})]})]})}exports.default=l;

package/dist/components/TextField/TextField.render.d.ts

@@ -0,0 +1,19 @@
+import { IconDefinition } from '../Icon';
+import { InputHTMLAttributes } from 'react';
+export interface TextFieldBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+    shape?: "filled" | "outlined";
+    label?: string;
+    supportingText?: string;
+    leadingIcon?: IconDefinition;
+    trailingIcon?: IconDefinition;
+    prefix?: string;
+    suffix?: string;
+    clearable?: boolean;
+}
+export interface TextFieldProps extends Omit<TextFieldBaseProps, "min" | "max" | "step"> {
+    onValueChange?: (value: string) => void;
+    defaultValue?: string;
+    value?: string;
+    counter?: boolean | "word";
+}
+export default function TextFieldRender(props: TextFieldProps): import('react').JSX.Element;