wimui 0.1.0

package/dist/components/form/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+interface Country {
+    code: string;
+    name: string;
+    dialCode: string;
+    flag: string;
+}
+export declare const PHONE_COUNTRIES: Country[];
+export type PhoneInputProps = {
+    /** Phone number value (the number part, excluding the country dial code). */
+    value?: string;
+    /** Callback when the phone number changes. */
+    onChange?: (value: string) => void;
+    /** Selected country code (e.g. "JP", "US"). */
+    countryCode?: string;
+    /** Callback when the country code changes. */
+    onCountryChange?: (countryCode: string) => void;
+    /** Placeholder for the phone number input. */
+    placeholder?: string;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Error message. */
+    error?: string;
+    /** Whether to show the required indicator. */
+    required?: boolean;
+    /** Field label. */
+    label?: string;
+    /** Layout direction of label and field. */
+    layout?: "vertical" | "horizontal";
+    /** Additional class names. */
+    className?: string;
+    /** Whether to take full width of parent. */
+    fullWidth?: boolean;
+};
+/**
+ * Component combining a country dial-code selector with a phone number input.
+ * Uses a custom dropdown for a polished design.
+ */
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/form/PhoneInput/PhoneInput.js

@@ -0,0 +1,185 @@
+"use client";
+import { Transition as e } from "../../layout/Transition/Transition.js";
+import t from "../../../icon/chevron-down.js";
+import { Icon as n } from "../../media/Icon/Icon.js";
+import { FieldTemplate as r } from "../FieldTemplate/FieldTemplate.js";
+import i from "./phone-input.module.js";
+import { forwardRef as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/form/PhoneInput/PhoneInput.tsx
+var p = [
+	{
+		code: "US",
+		name: "United States",
+		dialCode: "1",
+		flag: "🇺🇸"
+	},
+	{
+		code: "JP",
+		name: "Japan",
+		dialCode: "81",
+		flag: "🇯🇵"
+	},
+	{
+		code: "GB",
+		name: "United Kingdom",
+		dialCode: "44",
+		flag: "🇬🇧"
+	},
+	{
+		code: "AU",
+		name: "Australia",
+		dialCode: "61",
+		flag: "🇦🇺"
+	},
+	{
+		code: "DE",
+		name: "Germany",
+		dialCode: "49",
+		flag: "🇩🇪"
+	},
+	{
+		code: "FR",
+		name: "France",
+		dialCode: "33",
+		flag: "🇫🇷"
+	},
+	{
+		code: "CN",
+		name: "China",
+		dialCode: "86",
+		flag: "🇨🇳"
+	},
+	{
+		code: "KR",
+		name: "South Korea",
+		dialCode: "82",
+		flag: "🇰🇷"
+	},
+	{
+		code: "IN",
+		name: "India",
+		dialCode: "91",
+		flag: "🇮🇳"
+	},
+	{
+		code: "BR",
+		name: "Brazil",
+		dialCode: "55",
+		flag: "🇧🇷"
+	}
+], m = a(({ value: a = "", onChange: m, countryCode: h = "US", onCountryChange: g, placeholder: _ = "000-0000-0000", disabled: v = !1, error: y, required: b = !1, label: x, layout: S = "vertical", className: C, fullWidth: w = !1, ...T }, E) => {
+	let D = `wim-phone-input-${s()}`, O = x ? `${D}-label` : void 0, k = y ? `${D}-error` : void 0, [A, j] = l(!1), M = c(null);
+	o(() => {
+		let e = (e) => {
+			M.current && !M.current.contains(e.target) && j(!1);
+		};
+		return A && document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("mousedown", e);
+		};
+	}, [A]);
+	let N = p.find((e) => e.code === h) ?? p[0], P = (e) => {
+		m?.(e.target.value);
+	};
+	return /* @__PURE__ */ d(r, {
+		label: x,
+		labelId: O,
+		htmlFor: D,
+		required: b,
+		error: y,
+		errorId: k,
+		layout: S,
+		className: C,
+		children: /* @__PURE__ */ f("div", {
+			ref: M,
+			className: u("wim-phone-input", i.root, w && i.fullWidth, v && i.disabled, y && i.danger),
+			"data-testid": "phone-input-root",
+			...T,
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: i.countryWrapper,
+					children: [/* @__PURE__ */ f("button", {
+						type: "button",
+						className: i.countryTrigger,
+						onClick: () => !v && j(!A),
+						disabled: v,
+						"aria-haspopup": "listbox",
+						"aria-expanded": A,
+						"aria-labelledby": O,
+						"aria-label": x ? void 0 : "Select country",
+						children: [
+							/* @__PURE__ */ d("span", {
+								"aria-hidden": "true",
+								style: { fontSize: "1.2em" },
+								children: N.flag
+							}),
+							/* @__PURE__ */ f("span", {
+								className: i.dialCode,
+								children: ["+", N.dialCode]
+							}),
+							/* @__PURE__ */ d(n, {
+								component: t,
+								size: "sm",
+								className: u(i.chevron, A && i.chevronOpen)
+							})
+						]
+					}), /* @__PURE__ */ d(e, {
+						show: A,
+						preset: "fade",
+						className: i.dropdown,
+						children: /* @__PURE__ */ d("ul", {
+							className: i.countryList,
+							role: "listbox",
+							children: p.map((e) => /* @__PURE__ */ f("li", {
+								className: u(i.countryOption, N.code === e.code && i.selected),
+								onClick: () => {
+									g?.(e.code), j(!1);
+								},
+								onKeyDown: (t) => {
+									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), g?.(e.code), j(!1));
+								},
+								tabIndex: 0,
+								role: "option",
+								"aria-selected": N.code === e.code,
+								children: [
+									/* @__PURE__ */ d("span", {
+										"aria-hidden": "true",
+										children: e.flag
+									}),
+									/* @__PURE__ */ d("span", {
+										className: i.countryName,
+										children: e.name
+									}),
+									/* @__PURE__ */ f("span", {
+										className: i.countryCode,
+										children: ["+", e.dialCode]
+									})
+								]
+							}, e.code))
+						})
+					})]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: i.divider,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ d("input", {
+					id: D,
+					ref: E,
+					type: "tel",
+					value: a,
+					onChange: P,
+					placeholder: _,
+					disabled: v,
+					className: i.number,
+					"aria-invalid": !!y,
+					"aria-describedby": k
+				})
+			]
+		})
+	});
+});
+m.displayName = "PhoneInput";
+//#endregion
+export { p as PHONE_COUNTRIES, m as PhoneInput };

package/dist/components/form/PhoneInput/phone-input.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_zfdc3_17`,t=`_fullWidth_zfdc3_30`,n=`_disabled_zfdc3_33`,r=`_chevron_zfdc3_43`,i=`_countryCode_zfdc3_44`,a=`_number_zfdc3_45`,o=`_danger_zfdc3_8`,s=`_countryWrapper_zfdc3_57`,c=`_countryTrigger_zfdc3_64`,l=`_chevronOpen_zfdc3_90`,u=`_dropdown_zfdc3_93`,d=`_countryList_zfdc3_105`,f=`_countryOption_zfdc3_112`,p=`_selected_zfdc3_125`,m=`_countryName_zfdc3_130`,h=`_divider_zfdc3_140`,g={root:e,fullWidth:t,disabled:n,chevron:r,countryCode:i,number:a,danger:o,countryWrapper:s,countryTrigger:c,chevronOpen:l,dropdown:u,countryList:d,countryOption:f,selected:p,countryName:m,divider:h};exports.chevron=r,exports.chevronOpen=l,exports.countryCode=i,exports.countryList=d,exports.countryName=m,exports.countryOption=f,exports.countryTrigger=c,exports.countryWrapper=s,exports.danger=o,exports.default=g,exports.disabled=n,exports.divider=h,exports.dropdown=u,exports.fullWidth=t,exports.number=a,exports.root=e,exports.selected=p;

package/dist/components/form/PhoneInput/phone-input.module.js

@@ -0,0 +1,22 @@
+"use client";
+//#region src/components/form/PhoneInput/phone-input.module.scss
+var e = "_root_zfdc3_17", t = "_fullWidth_zfdc3_30", n = "_disabled_zfdc3_33", r = "_chevron_zfdc3_43", i = "_countryCode_zfdc3_44", a = "_number_zfdc3_45", o = "_danger_zfdc3_8", s = "_countryWrapper_zfdc3_57", c = "_countryTrigger_zfdc3_64", l = "_chevronOpen_zfdc3_90", u = "_dropdown_zfdc3_93", d = "_countryList_zfdc3_105", f = "_countryOption_zfdc3_112", p = "_selected_zfdc3_125", m = "_countryName_zfdc3_130", h = "_divider_zfdc3_140", g = {
+	root: e,
+	fullWidth: t,
+	disabled: n,
+	chevron: r,
+	countryCode: i,
+	number: a,
+	danger: o,
+	countryWrapper: s,
+	countryTrigger: c,
+	chevronOpen: l,
+	dropdown: u,
+	countryList: d,
+	countryOption: f,
+	selected: p,
+	countryName: m,
+	divider: h
+};
+//#endregion
+export { r as chevron, l as chevronOpen, i as countryCode, d as countryList, m as countryName, f as countryOption, c as countryTrigger, s as countryWrapper, o as danger, g as default, n as disabled, h as divider, u as dropdown, t as fullWidth, a as number, e as root, p as selected };

package/dist/components/form/QueryBuilder/QueryBuilder.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../Input/Input.cjs"),i=require("../DatePicker/DatePicker.cjs"),a=require("../NumberInput/NumberInput.cjs"),o=require("../SegmentedControl/SegmentedControl.cjs"),s=require("../Select/Select.cjs"),c=require("../Switch/Switch.cjs"),l=require("../IconButton/IconButton.cjs"),u=require("./querybuilder.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=0,h=()=>typeof window<`u`&&window.__VRT__?(m+=1,`vrt-id-${m}`):Math.random().toString(36).substring(2,11),g={string:[{label:`Equals`,value:`=`,key:`equal`},{label:`Does not equal`,value:`!=`,key:`not_equal`},{label:`Contains`,value:`contains`,key:`contains`},{label:`Starts with`,value:`starts_with`,key:`starts_with`},{label:`Ends with`,value:`ends_with`,key:`ends_with`},{label:`Is null`,value:`is_null`,key:`is_null`},{label:`Is not null`,value:`is_not_null`,key:`is_not_null`}],number:[{label:`Equals`,value:`=`,key:`equal`},{label:`Does not equal`,value:`!=`,key:`not_equal`},{label:`Greater than`,value:`>`,key:`greater_than`},{label:`Less than`,value:`<`,key:`less_than`},{label:`Greater than or equal`,value:`>=`,key:`greater_than_or_equal`},{label:`Less than or equal`,value:`<=`,key:`less_than_or_equal`},{label:`Is null`,value:`is_null`,key:`is_null`},{label:`Is not null`,value:`is_not_null`,key:`is_not_null`}],date:[{label:`Equals`,value:`=`,key:`equal`},{label:`Does not equal`,value:`!=`,key:`not_equal`},{label:`After`,value:`>`,key:`after`},{label:`Before`,value:`<`,key:`before`},{label:`After or on`,value:`>=`,key:`after_or_on`},{label:`Before or on`,value:`<=`,key:`before_or_on`},{label:`Is null`,value:`is_null`,key:`is_null`},{label:`Is not null`,value:`is_not_null`,key:`is_not_null`}],boolean:[{label:`Equals`,value:`=`,key:`equal`},{label:`Does not equal`,value:`!=`,key:`not_equal`},{label:`Is null`,value:`is_null`,key:`is_null`},{label:`Is not null`,value:`is_not_null`,key:`is_not_null`}]},_=({fields:e,query:m,defaultQuery:_,onChange:v,maxDepth:y=3,className:b,id:x,labels:S={}})=>{let{t:C}=t.useWimTranslation(`components`),{ruleAdded:w=C(`query.builder.rule_added`),groupAdded:T=C(`query.builder.group_added`),removed:E=C(`query.builder.removed`),ruleAriaLabel:D=C(`query.builder.rule`),fieldAriaLabel:O=C(`query.builder.field`),operatorAriaLabel:k=C(`query.builder.operator`),valueAriaLabel:A=C(`query.builder.value`),trueLabel:j=C(`query.builder.true`),falseLabel:M=C(`query.builder.false`),removeRuleAriaLabel:N=C(`query.builder.remove_rule`),removeGroupAriaLabel:P=C(`query.builder.remove_group`),addRuleLabel:F=C(`query.builder.add_rule`),addGroupLabel:I=C(`query.builder.add_group`),regionAriaLabel:L=C(`query.builder.region_label`),combinatorAriaLabel:R=C(`query.builder.combinator`),operators:z={}}=S,B=(0,d.useId)(),V=x||`wim-qb-${B}`,H=(0,d.useRef)(null),[U,W]=(0,d.useState)(_||{id:h(),combinator:`and`,not:!1,rules:[]}),G=m===void 0?U:m,K=(0,d.useCallback)(e=>{H.current&&(H.current.textContent=``,setTimeout(()=>{H.current&&(H.current.textContent=e)},50))},[]),q=(0,d.useCallback)(e=>{m===void 0&&W(e),v?.(e)},[m,v]),J=(e,t)=>{let n=r=>r.id===e?{...r,...t}:{...r,rules:r.rules.map(r=>r.id===e?{...r,...t}:`rules`in r?n(r):r)};q(n(G))},Y=t=>{let n=e[0],r={id:h(),field:n?.name||``,operator:`=`,value:n?.type===`boolean`?!1:``},i=e=>e.id===t?{...e,rules:[...e.rules,r]}:{...e,rules:e.rules.map(e=>`rules`in e?i(e):e)};q(i(G)),K(w)},X=e=>{let t={id:h(),combinator:`and`,not:!1,rules:[]},n=r=>r.id===e?{...r,rules:[...r.rules,t]}:{...r,rules:r.rules.map(e=>`rules`in e?n(e):e)};q(n(G)),K(T)},Z=e=>{let t=n=>({...n,rules:n.rules.filter(t=>t.id!==e).map(e=>`rules`in e?t(e):e)});q(t(G)),K(E)},Q=(e,t,r)=>(0,p.jsxs)(`div`,{role:`group`,"aria-label":`${e.combinator.toUpperCase()} group`,className:(0,f.default)(u.default.group,t>0&&u.default.nested,r&&u.default.excluded),children:[(0,p.jsxs)(`div`,{className:u.default.groupHeader,children:[(0,p.jsxs)(`div`,{className:u.default.groupHeaderLeft,children:[(0,p.jsx)(o.SegmentedControl,{size:`md`,options:[{label:`AND`,value:`and`},{label:`OR`,value:`or`}],value:e.combinator,onChange:t=>J(e.id,{combinator:t}),"aria-label":R,styles:{root:u.default.segmentedControl,item:u.default.segmentedControlItem,slider:u.default.segmentedControlSlider}}),(0,p.jsx)(c.Switch,{size:`md`,checked:e.not,onChange:t=>J(e.id,{not:t.target.checked}),children:`NOT`})]}),t>0&&(0,p.jsx)(l.IconButton,{iconName:`TrashIcon`,"aria-label":P,variant:`ghost`,size:`md`,color:`danger`,onClick:()=>Z(e.id),className:u.default.removeGroup})]}),(0,p.jsx)(`div`,{className:u.default.ruleList,children:e.rules.map(e=>`rules`in e?Q(e,t+1,r):$(e))}),(0,p.jsxs)(`div`,{className:u.default.groupActions,children:[(0,p.jsx)(n.Button,{size:`md`,variant:`ghost`,icon:`PlusIcon`,onClick:()=>Y(e.id),children:F}),t<y&&(0,p.jsx)(n.Button,{size:`md`,variant:`ghost`,icon:`PlusIcon`,onClick:()=>X(e.id),children:I})]})]},e.id),$=t=>{let n=e.find(e=>e.name===t.field)?.type||`string`,o=g[n].map(e=>({...e,label:z[e.key]||e.label})),c=n=>{let r=e.find(e=>e.name===n);J(t.id,{field:n,operator:`=`,value:r?.type===`boolean`?!1:``})},d=t.operator===`is_null`||t.operator===`is_not_null`;return(0,p.jsx)(`div`,{className:u.default.rule,role:`group`,"aria-label":D,children:(0,p.jsxs)(`div`,{className:u.default.ruleFields,children:[(0,p.jsx)(s.Select,{className:u.default.field,options:e.map(e=>({label:e.label,value:e.name})),value:t.field,onChange:c,"aria-label":O,fullWidth:!0,styles:{root:u.default.select,trigger:u.default.selectTrigger,inputBase:{root:u.default.inputBase}}}),(0,p.jsx)(s.Select,{className:u.default.operator,options:o.map(e=>({label:e.label,value:e.value})),value:t.operator,onChange:e=>J(t.id,{operator:e}),"aria-label":k,fullWidth:!0,styles:{root:u.default.select,trigger:u.default.selectTrigger,inputBase:{root:u.default.inputBase}}}),!d&&(0,p.jsx)(`div`,{className:u.default.value,children:n===`number`?(0,p.jsx)(a.NumberInput,{value:typeof t.value==`boolean`?void 0:t.value??void 0,onChange:e=>J(t.id,{value:e.target.value}),"aria-label":A}):n===`date`?(0,p.jsx)(i.DatePicker,{value:typeof t.value==`string`||typeof t.value==`number`?new Date(t.value):void 0,onChange:e=>J(t.id,{value:e?e.toISOString():``}),"aria-label":A}):n===`boolean`?(0,p.jsx)(s.Select,{options:[{label:j,value:`true`},{label:M,value:`false`}],value:String(t.value),onChange:e=>J(t.id,{value:e===`true`}),"aria-label":A,fullWidth:!0,styles:{root:u.default.select,trigger:u.default.selectTrigger,inputBase:{root:u.default.inputBase}}}):(0,p.jsx)(r.Input,{value:typeof t.value==`boolean`?void 0:t.value??void 0,onChange:e=>J(t.id,{value:e.target.value}),"aria-label":A,styles:{root:u.default.inputBase}})}),(0,p.jsx)(l.IconButton,{iconName:`TrashIcon`,"aria-label":N,variant:`ghost`,size:`md`,color:`danger`,onClick:()=>Z(t.id),className:u.default.removeRule})]})},t.id)};return(0,p.jsxs)(`div`,{id:V,role:`region`,"aria-label":L,className:(0,f.default)(`wim-query-builder`,u.default.root,b),children:[(0,p.jsx)(`div`,{ref:H,"aria-live":`polite`,"aria-atomic":`true`,className:u.default.srOnly}),Q(G,0,!1)]})};exports.QueryBuilder=_;

package/dist/components/form/QueryBuilder/QueryBuilder.d.ts

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+export type QueryFieldType = "string" | "number" | "date" | "boolean";
+export interface QueryField {
+    name: string;
+    label: React.ReactNode;
+    type: QueryFieldType;
+}
+export interface QueryRule {
+    id: string;
+    field: string;
+    operator: string;
+    value: string | number | boolean | null;
+}
+export interface QueryGroup {
+    id: string;
+    combinator: "and" | "or";
+    not: boolean;
+    rules: (QueryRule | QueryGroup)[];
+}
+export interface QueryBuilderLabels {
+    ruleAdded?: string;
+    groupAdded?: string;
+    removed?: string;
+    ruleAriaLabel?: string;
+    fieldAriaLabel?: string;
+    operatorAriaLabel?: string;
+    valueAriaLabel?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    removeRuleAriaLabel?: string;
+    removeGroupAriaLabel?: string;
+    addRuleLabel?: string;
+    addGroupLabel?: string;
+    regionAriaLabel?: string;
+    combinatorAriaLabel?: string;
+    operators?: Record<string, string>;
+}
+export interface QueryBuilderProps {
+    /**
+     * Field definitions
+     */
+    fields: QueryField[];
+    /**
+     * Current query state (controlled)
+     */
+    query?: QueryGroup;
+    /**
+     * Default query state (uncontrolled)
+     */
+    defaultQuery?: QueryGroup;
+    /**
+     * Callback when query changes
+     */
+    onChange?: (query: QueryGroup) => void;
+    /**
+     * Maximum nesting depth
+     */
+    maxDepth?: number;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Labels for internationalization
+     */
+    labels?: QueryBuilderLabels;
+}
+/**
+ * 複雑な検索条件をネスト状に組み立てるためのクエリビルダーコンポーネント。
+ */
+export declare const QueryBuilder: ({ fields, query, defaultQuery, onChange, maxDepth, className, id: customId, labels, }: QueryBuilderProps) => React.JSX.Element;