feat: Refactor TextArea component and styles for improved usability and consistency
- Updated textarea styles to utilize CSS variables for dimensions and padding. - Enhanced placeholder styling and added disabled state styles. - Refactored TextArea component to use forwardRef and updated status handling. - Changed input statuses from 'normal' to 'default' for better clarity. - Introduced global decimal separator management in CurrencyService. - Updated tests to cover new decimal separator functionality. - Cleaned up global CSS for better organization and readability. - Removed deprecated rc-component dependencies in favor of @rc-component packages.
This commit is contained in:
Firman Ramdhani
@@ -1,9 +1,11 @@
|
||||
import FormShowcase from './form-showcase/form-showcase';
|
||||
import InputShowCase from './input-showcase';
|
||||
|
||||
export default function ExamplePage() {
|
||||
return (
|
||||
<div>
|
||||
<InputShowCase />
|
||||
<FormShowcase />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Form, Input, InputPassword } from '@repo/ui';
|
||||
import React from 'react';
|
||||
// --- 2. Main Showcase Component ---
|
||||
export default function FormShowcase() {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleFinish = (values: any) => {
|
||||
console.log('Success - Form Values:', values);
|
||||
alert(JSON.stringify(values, null, 2));
|
||||
};
|
||||
|
||||
const handleFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border border-gray-200">
|
||||
<h2 className="text-xl font-bold mb-6 text-gray-800">Test Migrasi @rc-component/form</h2>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleFinish}
|
||||
onFinishFailed={handleFinishFailed}
|
||||
initialValues={{ role: 'user', agree: false }}
|
||||
>
|
||||
{/* Case 1: Text Input Biasa + Validasi Required */}
|
||||
<Form.Item name="username" label="Username" rules={[{ required: true, message: 'Username wajib diisi!' }]}>
|
||||
<Input placeholder="Masukkan username" />
|
||||
</Form.Item>
|
||||
|
||||
{/* Case 2: Email + Validasi Format */}
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="Email"
|
||||
rules={[
|
||||
{ required: true, message: 'Email wajib diisi!' },
|
||||
{ type: 'email', message: 'Format email tidak valid!' },
|
||||
]}
|
||||
>
|
||||
<Input type="email" placeholder="contoh@email.com" />
|
||||
</Form.Item>
|
||||
|
||||
{/* Case 3: Password + Validasi Panjang */}
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="Password"
|
||||
rules={[
|
||||
{ required: true, message: 'Password wajib diisi!' },
|
||||
{ min: 6, message: 'Password minimal 6 karakter!' },
|
||||
]}
|
||||
>
|
||||
<InputPassword placeholder="Masukkan password" />
|
||||
</Form.Item>
|
||||
|
||||
{/* Tombol Aksi */}
|
||||
<div className="flex gap-3 mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 font-medium transition"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => form.resetFields()}
|
||||
className="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 font-medium transition"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,12 +12,12 @@
|
||||
"test:watch": "vitest --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rc-component/form": "^1.6.2",
|
||||
"@rc-component/input": "^1.1.2",
|
||||
"@rc-component/input-number": "^1.6.2",
|
||||
"@rc-component/textarea": "^1.1.2",
|
||||
"@repo/utils": "workspace:*",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"rc-field-form": "^2.7.1",
|
||||
"rc-input": "^1.8.0",
|
||||
"rc-input-number": "^9.5.0",
|
||||
"rc-textarea": "^1.10.2",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import RcForm from 'rc-field-form';
|
||||
import RcForm from '@rc-component/form';
|
||||
import { FormProps } from '../types';
|
||||
|
||||
export default function FormControl<Values = any>({ children, ...props }: FormProps<Values>) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// form-item.component.tsx
|
||||
import React, { ReactElement } from 'react';
|
||||
import { Field } from 'rc-field-form';
|
||||
import { Field } from '@rc-component/form';
|
||||
import { FormItemProps } from '../types';
|
||||
|
||||
export default function FormItem(props: FormItemProps) {
|
||||
@@ -8,23 +9,28 @@ export default function FormItem(props: FormItemProps) {
|
||||
return (
|
||||
<Field name={name} rules={rules} valuePropName={valuePropName} initialValue={initialValue}>
|
||||
{(control, meta) => {
|
||||
const hasError = meta.errors.length > 0;
|
||||
const hasWarning = meta.warnings.length > 0;
|
||||
// Defensive check: tambahkan ?. untuk keamanan di versi baru
|
||||
const hasError = meta.errors && meta.errors.length > 0;
|
||||
const hasWarning = meta.warnings && meta.warnings.length > 0;
|
||||
|
||||
const status = OverrideStatus ?? (hasError ? 'error' : hasWarning ? 'warning' : 'normal');
|
||||
|
||||
const isValid = React.isValidElement(children);
|
||||
const childElement = isValid ? (children as ReactElement<{ status?: any }>) : null;
|
||||
|
||||
// 3. Clone the child element to inject form control props and status
|
||||
// Clone element logic tetap dipertahankan
|
||||
const childNode = childElement ? React.cloneElement(childElement, { ...control, status }) : children;
|
||||
|
||||
// Logic pengecekan 'required' pada rules
|
||||
// Note: Pastikan rule object memiliki properti 'required', karena Rule juga bisa berupa function.
|
||||
const isRequired = rules?.some((r: any) => r && typeof r === 'object' && r.required);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col mb-4 w-full">
|
||||
{label && (
|
||||
<label className={`mb-1.5 text-sm font-medium ${hasError ? 'text-red-500' : 'text-gray-700'}`}>
|
||||
{label}
|
||||
{rules?.some((r: any) => r.required) && <span className="ml-1 text-red-500">*</span>}
|
||||
{isRequired && <span className="ml-1 text-red-500">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// index.ts
|
||||
import React from 'react';
|
||||
import { useForm, List, FieldContext } from 'rc-field-form';
|
||||
import { useForm, List, FieldContext } from '@rc-component/form';
|
||||
import { FormProps } from '../types';
|
||||
|
||||
import FormControl from './form-control.component';
|
||||
@@ -12,10 +13,6 @@ const FormProvider = React.forwardRef(FormControl) as <Values extends object = a
|
||||
props: FormProps<Values> & { ref?: React.ForwardedRef<any> },
|
||||
) => React.ReactElement;
|
||||
|
||||
/**
|
||||
* Compound Component Pattern
|
||||
* Centralizes all form-related components and hooks under the 'Form' namespace
|
||||
*/
|
||||
type CompoundedComponent = typeof FormProvider & {
|
||||
Item: typeof FormItem;
|
||||
useForm: typeof useForm;
|
||||
@@ -23,7 +20,7 @@ type CompoundedComponent = typeof FormProvider & {
|
||||
Provider: typeof FieldContext.Provider;
|
||||
};
|
||||
|
||||
// Assign sub-components and utilities to the main Form component
|
||||
// Assign sub-components and utilities
|
||||
const Form = FormProvider as CompoundedComponent;
|
||||
Form.Item = FormItem;
|
||||
Form.useForm = useForm;
|
||||
|
||||
@@ -1,26 +1,43 @@
|
||||
import RcInputNumber from 'rc-input-number';
|
||||
import { forwardRef } from 'react';
|
||||
import RcInputNumber from '@rc-component/input-number';
|
||||
import { InputNumberProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
|
||||
|
||||
// Handler Icons (Chevron Modern)
|
||||
// Kita bungkus dengan span agar styling flexbox lebih mudah diatur nanti
|
||||
const UpIcon = () => (
|
||||
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
|
||||
<span className="input-number-handler-up-inner flex items-center justify-center w-full h-full">
|
||||
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
|
||||
<path d="M8.5 6.5L12 10 5 10z" />
|
||||
</svg>
|
||||
);
|
||||
const DownIcon = () => (
|
||||
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
|
||||
<path d="M8.5 9.5L5 6 12 6z" />
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
|
||||
export const InputNumber = (props: InputNumberProps) => {
|
||||
const DownIcon = () => (
|
||||
<span className="input-number-handler-down-inner flex items-center justify-center w-full h-full">
|
||||
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
|
||||
<path d="M8.5 9.5L5 6 12 6z" />
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
|
||||
export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
|
||||
const { status, className, variant = 'outlined', ...restProps } = props;
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
|
||||
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
|
||||
|
||||
const computedClassName = [className, `input-number-status-${currentStatus}`, `input-number-variant-${variant}`]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<RcInputNumber {...restProps} className={computedClassName} upHandler={<UpIcon />} downHandler={<DownIcon />} />
|
||||
<RcInputNumber
|
||||
ref={ref}
|
||||
{...restProps}
|
||||
className={computedClassName}
|
||||
upHandler={<UpIcon />}
|
||||
downHandler={<DownIcon />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
InputNumber.displayName = 'InputNumber';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { InputPasswordProps } from '../types';
|
||||
import { Input } from './input.component';
|
||||
|
||||
|
||||
@@ -1,17 +1,26 @@
|
||||
import RcInput from 'rc-input';
|
||||
import { forwardRef } from 'react';
|
||||
import RcInput, { InputRef, InputProps as RcInputProps } from '@rc-component/input';
|
||||
import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
|
||||
|
||||
export const Input = (props: InputProps) => {
|
||||
export const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
||||
const { status, className, variant = 'outlined', disabled, ...restProps } = props;
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
|
||||
|
||||
// Validasi status agar aman
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
|
||||
|
||||
// Construct classname
|
||||
// Note: class 'rc-input-disabled' biasanya otomatis ditambahkan oleh library jika disabled={true}
|
||||
const computedClassName = [
|
||||
className,
|
||||
`input-status-${currentStatus}`,
|
||||
`input-variant-${variant}`,
|
||||
disabled ? 'rc-input-affix-wrapper-disabled' : '',
|
||||
// Kita tambahkan class helper ini manual jika ingin styling spesifik wrapper saat disabled
|
||||
disabled ? 'input-disabled' : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return <RcInput {...restProps} className={computedClassName} disabled={disabled} />;
|
||||
};
|
||||
return <RcInput ref={ref} {...restProps} disabled={disabled} className={computedClassName} />;
|
||||
});
|
||||
|
||||
Input.displayName = 'Input';
|
||||
|
||||
@@ -1,285 +1,367 @@
|
||||
@layer components {
|
||||
:root {
|
||||
--suffix-spacing: 12px;
|
||||
--input-height: 32px;
|
||||
--input-radius: 6px; /* Sesuai radius-base */
|
||||
--input-padding-x: 11px;
|
||||
--input-handler-width: 22px;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. LAYOUT & GEOMETRY (DO NOT TOUCH)
|
||||
1. BASE SETUP (Layout & Reset)
|
||||
========================================= */
|
||||
|
||||
/* CONTAINER UTAMA */
|
||||
.rc-input-number,
|
||||
.rc-input-number-affix-wrapper {
|
||||
@apply relative flex w-full items-center m-0 transition-all duration-200 ease-in-out text-sm bg-white;
|
||||
height: var(--input-height);
|
||||
line-height: 1.5715;
|
||||
border-radius: var(--input-radius);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* NESTED RESET (Fix Flexbox) */
|
||||
.rc-input-number-affix-wrapper .rc-input-number {
|
||||
@apply border-none shadow-none bg-transparent p-0 h-full static;
|
||||
.rc-input-number {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
/* Global Variables */
|
||||
height: var(--input-height);
|
||||
font-size: var(--input-font-size);
|
||||
border-radius: var(--input-radius);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid transparent;
|
||||
|
||||
/* Transisi standar */
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* INPUT FIELD */
|
||||
/* Input Element */
|
||||
.rc-input-number-input {
|
||||
@apply w-full h-full bg-transparent border-none outline-none text-gray-900;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 var(--input-padding-x);
|
||||
appearance: textfield;
|
||||
}
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--input-radius);
|
||||
outline: 0;
|
||||
color: inherit; /* Mewarisi dari parent */
|
||||
transition: all 0.2s linear;
|
||||
|
||||
/* Input Wrapper Helper */
|
||||
.rc-input-number-input-wrap {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
/* Padding Kanan Input (jika tanpa suffix wrapper) */
|
||||
.rc-input-number:not(.rc-input-number-affix-wrapper) .rc-input-number-input {
|
||||
/* Padding Kanan Wajib (Space untuk Actions) */
|
||||
padding-right: var(--input-handler-width);
|
||||
}
|
||||
|
||||
/* PREFIX & SUFFIX */
|
||||
.rc-input-number-prefix {
|
||||
@apply flex items-center ml-3 text-gray-500 z-10;
|
||||
/* Hide Native Spinners (Browser Default) */
|
||||
.rc-input-number-input::-webkit-inner-spin-button,
|
||||
.rc-input-number-input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
.rc-input-number-input {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* Prefix Styling */
|
||||
.rc-input-number-prefix {
|
||||
margin-left: var(--input-padding-x);
|
||||
margin-right: 0.5rem; /* ~8px */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* Suffix Styling */
|
||||
.rc-input-number-suffix {
|
||||
@apply flex items-center text-gray-500 z-10;
|
||||
margin-right: var(--suffix-spacing);
|
||||
margin-right: var(--input-padding-x);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
color: var(--color-gray-500);
|
||||
z-index: 10;
|
||||
transition: margin-right 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animation Trigger */
|
||||
/* Animation Trigger: Geser Suffix saat hover/focus agar tidak tertutup tombol action */
|
||||
.rc-input-number:hover .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper:hover .rc-input-number-suffix,
|
||||
.rc-input-number-focused .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper-focused .rc-input-number-suffix,
|
||||
.rc-input-number:focus-within .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper:focus-within .rc-input-number-suffix {
|
||||
margin-right: calc(var(--suffix-spacing) + var(--input-handler-width));
|
||||
margin-right: calc(var(--input-padding-x) + var(--input-handler-width));
|
||||
}
|
||||
|
||||
/* HANDLER WRAPPER */
|
||||
.rc-input-number-handler-wrap {
|
||||
/* =========================================
|
||||
2. ACTIONS CONTAINER (Custom Spinners)
|
||||
Target: .rc-input-number-actions
|
||||
========================================= */
|
||||
.rc-input-number-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: var(--input-handler-width);
|
||||
@apply flex flex-col border-l border-gray-200 bg-white opacity-0 transition-opacity duration-200 overflow-hidden z-20;
|
||||
border-top-right-radius: var(--input-radius);
|
||||
border-bottom-right-radius: var(--input-radius);
|
||||
height: 100%;
|
||||
|
||||
/* Menggunakan var input-bg agar konsisten (putih) */
|
||||
background: var(--input-bg);
|
||||
|
||||
/* Default Border (akan di-override status) */
|
||||
border-left: 1px solid var(--input-border);
|
||||
border-radius: 0 var(--input-radius) var(--input-radius) 0;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.24s linear 0.1s;
|
||||
z-index: 10;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Show handlers logic */
|
||||
.rc-input-number:hover .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper:hover .rc-input-number-handler-wrap,
|
||||
.rc-input-number-focused .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper-focused .rc-input-number-handler-wrap,
|
||||
.rc-input-number:focus-within .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper:focus-within .rc-input-number-handler-wrap {
|
||||
@apply opacity-100;
|
||||
/* Show Actions on Interaction */
|
||||
.rc-input-number:hover .rc-input-number-actions,
|
||||
.rc-input-number:focus-within .rc-input-number-actions {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.rc-input-number-handler {
|
||||
@apply flex items-center justify-center flex-1 text-gray-400 cursor-pointer transition-colors duration-100 bg-white;
|
||||
/* Individual Buttons */
|
||||
.rc-input-number-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: var(--color-gray-400);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.rc-input-number-handler:hover {
|
||||
@apply text-brand-600 bg-gray-50;
|
||||
height: 60%;
|
||||
|
||||
.rc-input-number-action:active {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
.rc-input-number-handler:active {
|
||||
@apply bg-gray-100;
|
||||
|
||||
.rc-input-number-action:hover {
|
||||
color: var(--color-brand-500);
|
||||
height: 60%; /* Efek hover button membesar dikit */
|
||||
}
|
||||
.rc-input-number-handler-up {
|
||||
@apply border-b border-gray-200;
|
||||
|
||||
/* Border Bawah untuk Action UP */
|
||||
.rc-input-number-action-up {
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. SKINS, VARIANTS & STATUS
|
||||
(Matching your Input Text Logic)
|
||||
3. STATUS MATRIX (VARIANT: OUTLINED)
|
||||
========================================= */
|
||||
|
||||
/* --- COMMON FOCUS STYLE (Brand Color) --- */
|
||||
/* Default focus for Normal status */
|
||||
.input-number-status-normal.rc-input-number-focused,
|
||||
.input-number-status-normal.rc-input-number-affix-wrapper-focused,
|
||||
.input-number-status-normal:focus-within {
|
||||
border-color: var(--color-brand-500) !important;
|
||||
box-shadow: 0 0 0 3px var(--color-brand-100) !important; /* Brand 200/100 for ring */
|
||||
background-color: #fff !important;
|
||||
/* --- DEFAULT --- */
|
||||
.input-number-variant-outlined.input-number-status-default {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-default:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-default:focus-within {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-actions {
|
||||
border-left-color: var(--focus-border-color);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-action-up {
|
||||
border-bottom-color: var(--focus-border-color);
|
||||
}
|
||||
|
||||
/* ====================
|
||||
VARIANT: OUTLINED
|
||||
==================== */
|
||||
|
||||
/* Normal */
|
||||
.input-number-variant-outlined.input-number-status-normal {
|
||||
@apply border-gray-300;
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-normal:hover {
|
||||
@apply border-brand-400; /* Atau var(--input-border-hover) */
|
||||
}
|
||||
|
||||
/* Error (Outlined) */
|
||||
/* --- ERROR --- */
|
||||
.input-number-variant-outlined.input-number-status-error {
|
||||
border-color: var(--color-error-500) !important;
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-error:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-error.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-error.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-error-100) !important;
|
||||
border-color: var(--color-error-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-error:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-error-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-error:focus-within {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-error .rc-input-number-actions {
|
||||
border-left-color: var(--color-error-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-error .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
/* Warning (Outlined) */
|
||||
/* --- WARNING --- */
|
||||
.input-number-variant-outlined.input-number-status-warning {
|
||||
border-color: var(--color-warning-500) !important;
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-warning:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-warning.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-warning.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
|
||||
border-color: var(--color-warning-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-warning:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-warning-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-warning:focus-within {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-warning .rc-input-number-actions {
|
||||
border-left-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-warning .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
/* Success (Outlined) */
|
||||
/* --- SUCCESS --- */
|
||||
.input-number-variant-outlined.input-number-status-success {
|
||||
border-color: var(--color-success-500) !important;
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-success:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-success.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-success.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-success-100) !important;
|
||||
border-color: var(--color-success-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-success:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-success-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-success:focus-within {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-success .rc-input-number-actions {
|
||||
border-left-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-success .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-success-500);
|
||||
}
|
||||
|
||||
/* Info (Outlined) */
|
||||
/* --- INFO --- */
|
||||
.input-number-variant-outlined.input-number-status-info {
|
||||
border-color: var(--color-info-500) !important;
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-info:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-info.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-info.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-info-100) !important;
|
||||
border-color: var(--color-info-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-info:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-info-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-info:focus-within {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-info .rc-input-number-actions {
|
||||
border-left-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-info .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* ====================
|
||||
VARIANT: FILLED
|
||||
==================== */
|
||||
/* =========================================
|
||||
4. STATUS MATRIX (VARIANT: FILLED)
|
||||
========================================= */
|
||||
|
||||
/* Normal Filled */
|
||||
.input-number-variant-filled.input-number-status-normal {
|
||||
/* Gunakan gray-100 atau var(--input-bg) jika gray */
|
||||
/* @apply border-transparent bg-gray-100; */
|
||||
@apply border-gray-300;
|
||||
/* --- NORMAL FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-default {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-normal:hover {
|
||||
/* @apply bg-gray-200; */
|
||||
@apply border-brand-400; /* Atau var(--input-border-hover) */
|
||||
.input-number-variant-filled.input-number-status-default:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
/* Saat Focus, Filled Normal jadi Putih + Brand Border */
|
||||
.input-number-variant-filled.input-number-status-normal:focus-within,
|
||||
.input-number-variant-filled.input-number-status-normal.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-normal.rc-input-number-affix-wrapper-focused {
|
||||
@apply bg-white border-brand-500;
|
||||
.input-number-variant-filled.input-number-status-default:focus-within {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Error Filled (Colored BG) */
|
||||
/* --- ERROR FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-error {
|
||||
background-color: var(--color-error-50) !important;
|
||||
border-color: var(--color-error-500) !important;
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
/* Fix: Filled Error saat Focus -> Background Putih */
|
||||
.input-number-variant-filled.input-number-status-error:focus-within,
|
||||
.input-number-variant-filled.input-number-status-error.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-error.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-error-100) !important;
|
||||
/* Actions Background & Border Sync (Error) */
|
||||
.input-number-variant-filled.input-number-status-error .rc-input-number-actions {
|
||||
background-color: var(--color-error-50);
|
||||
border-left-color: var(--color-error-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-error .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-error-500);
|
||||
}
|
||||
/* Focus: Revert to White BG */
|
||||
.input-number-variant-filled.input-number-status-error:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-error:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* Warning Filled (Colored BG) */
|
||||
/* --- WARNING FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-warning {
|
||||
background-color: var(--color-warning-50) !important;
|
||||
border-color: var(--color-warning-500) !important;
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-500);
|
||||
color: var(--color-warning-600);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning:focus-within,
|
||||
.input-number-variant-filled.input-number-status-warning.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-warning.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
|
||||
.input-number-variant-filled.input-number-status-warning .rc-input-number-actions {
|
||||
background-color: var(--color-warning-50);
|
||||
border-left-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* Success Filled (Colored BG) */
|
||||
/* --- SUCCESS FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-success {
|
||||
background-color: var(--color-success-50) !important;
|
||||
border-color: var(--color-success-500) !important;
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-500);
|
||||
color: var(--color-success-600);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success:focus-within,
|
||||
.input-number-variant-filled.input-number-status-success.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-success.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-success-100) !important;
|
||||
.input-number-variant-filled.input-number-status-success .rc-input-number-actions {
|
||||
background-color: var(--color-success-50);
|
||||
border-left-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* Info Filled (Colored BG) */
|
||||
/* --- INFO FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-info {
|
||||
background-color: var(--color-info-50) !important;
|
||||
border-color: var(--color-info-500) !important;
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-500);
|
||||
color: var(--color-info-600);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info:focus-within,
|
||||
.input-number-variant-filled.input-number-status-info.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-info.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-info-100) !important;
|
||||
.input-number-variant-filled.input-number-status-info .rc-input-number-actions {
|
||||
background-color: var(--color-info-50);
|
||||
border-left-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* ====================
|
||||
HANDLER BORDER SYNC
|
||||
==================== */
|
||||
/* Agar garis kiri handler warnanya sama dengan border input saat status aktif */
|
||||
|
||||
.input-number-status-error .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-error-500) !important;
|
||||
/* =========================================
|
||||
5. DISABLED STATE
|
||||
========================================= */
|
||||
.rc-input-number-disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
border-color: var(--disabled-border) !important;
|
||||
color: var(--disabled-text);
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
}
|
||||
.input-number-status-warning .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-warning-500) !important;
|
||||
.rc-input-number-disabled .rc-input-number-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.input-number-status-success .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-success-500) !important;
|
||||
}
|
||||
.input-number-status-info .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-info-500) !important;
|
||||
}
|
||||
|
||||
/* ====================
|
||||
DISABLED STATE
|
||||
==================== */
|
||||
.rc-input-number-disabled,
|
||||
.rc-input-number-affix-wrapper-disabled {
|
||||
@apply bg-gray-50 border-gray-200 cursor-not-allowed opacity-70;
|
||||
/* Force styles to override status colors */
|
||||
background-color: var(--color-gray-50) !important;
|
||||
border-color: var(--color-gray-200) !important;
|
||||
}
|
||||
.rc-input-number-disabled .rc-input-number-input,
|
||||
.rc-input-number-affix-wrapper-disabled .rc-input-number-input {
|
||||
@apply cursor-not-allowed text-gray-400;
|
||||
}
|
||||
/* Hide handler on disabled */
|
||||
.rc-input-number-disabled .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper-disabled .rc-input-number-handler-wrap {
|
||||
display: none;
|
||||
.rc-input-number-disabled .rc-input-number-actions {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,27 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
BASE RESET
|
||||
BASE RESET & SHARED
|
||||
========================================= */
|
||||
.rc-input {
|
||||
/* Wajib border-box agar padding tidak merusak lebar */
|
||||
box-sizing: border-box;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
/* Menggunakan Variable Dimensi Input */
|
||||
height: var(--input-height);
|
||||
padding: 0 12px;
|
||||
padding: 0 var(--input-padding-x); /* Konsisten dengan 0.92rem */
|
||||
|
||||
font-size: var(--input-font-size);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
/* Default: White Background (No Color) */
|
||||
background-color: var(--input-bg);
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
|
||||
/* Transisi standar */
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
}
|
||||
@@ -25,142 +31,64 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Disabled State (Standalone Input) */
|
||||
.rc-input:disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
border-color: var(--disabled-border) !important;
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. VARIANT: OUTLINED
|
||||
Rule: Never show colored background.
|
||||
Only change border color.
|
||||
AFFIX WRAPPER (PREFIX / SUFFIX) SETUP
|
||||
========================================= */
|
||||
|
||||
/* Outlined - Normal */
|
||||
.input-variant-outlined.input-status-normal {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-variant-outlined.input-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-variant-outlined.input-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
/* Base Wrapper Style */
|
||||
.rc-input-affix-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
/* Outlined - Error (NO Background, RED Border) */
|
||||
.input-variant-outlined.input-status-error {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-error:hover,
|
||||
.input-variant-outlined.input-status-error:focus {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
/* Menggunakan Variable Dimensi Input */
|
||||
height: var(--input-height);
|
||||
padding: 0 var(--input-padding-x);
|
||||
|
||||
/* Outlined - Warning (NO Background, AMBER Border) */
|
||||
.input-variant-outlined.input-status-warning {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-warning:hover,
|
||||
.input-variant-outlined.input-status-warning:focus {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Outlined - Success (NO Background, GREEN Border) */
|
||||
.input-variant-outlined.input-status-success {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-success:hover,
|
||||
.input-variant-outlined.input-status-success:focus {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Outlined - Info (NO Background, BLUE Border) */
|
||||
.input-variant-outlined.input-status-info {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-info:hover,
|
||||
.input-variant-outlined.input-status-info:focus {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. VARIANT: FILLED
|
||||
Rule: Normal = White Bg.
|
||||
Error/Warning/Success/Info = Colored Bg.
|
||||
========================================= */
|
||||
|
||||
/* Filled - Normal (Sama seperti Outlined - No Background) */
|
||||
.input-variant-filled.input-status-normal {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border); /* Tetap butuh border agar konsisten */
|
||||
}
|
||||
.input-variant-filled.input-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-variant-filled.input-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Filled - Error (RED Background + Red Border) */
|
||||
.input-variant-filled.input-status-error {
|
||||
background-color: var(--color-error-50); /* Background Merah Muda */
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
.input-variant-filled.input-status-error:focus {
|
||||
background-color: #fff; /* Optional: Balik putih saat diketik */
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
/* Reset Input di dalam Wrapper */
|
||||
.rc-input-affix-wrapper .rc-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Filled - Warning (AMBER Background + Amber Border) */
|
||||
.input-variant-filled.input-status-warning {
|
||||
background-color: var(--color-warning-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-warning-500);
|
||||
/* Prefix & Suffix Positioning */
|
||||
.rc-input-prefix {
|
||||
margin-right: 0.5rem; /* ~8px, hardcoded ok atau bisa buat var baru */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
}
|
||||
.input-variant-filled.input-status-warning:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
.rc-input-suffix {
|
||||
margin-left: 0.5rem; /* ~8px */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Filled - Success */
|
||||
.input-variant-filled.input-status-success {
|
||||
background-color: var(--color-success-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-variant-filled.input-status-success:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Filled - Info */
|
||||
.input-variant-filled.input-status-info {
|
||||
background-color: var(--color-info-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-variant-filled.input-status-info:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
SUPPORT FOR PREFIX & SUFFIX (AFFIX)
|
||||
========================================= */
|
||||
|
||||
/* 1. Wrapper Styling */
|
||||
|
||||
/* Disabled Wrapper */
|
||||
.rc-input-affix-wrapper-disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
@@ -168,73 +96,155 @@
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rc-input-affix-wrapper {
|
||||
@apply relative flex items-center w-full transition-all duration-200;
|
||||
height: var(--input-height);
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
background-color: var(--input-bg);
|
||||
box-sizing: border-box;
|
||||
.rc-input-affix-wrapper-disabled .rc-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 2. Reset Inner Input agar tidak double styling */
|
||||
.rc-input-affix-wrapper .rc-input {
|
||||
@apply border-none p-0 bg-transparent w-full h-full;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
/* =========================================
|
||||
LOGIC MATRIX: [VARIANT] x [STATUS]
|
||||
========================================= */
|
||||
|
||||
/* 3. Prefix/Suffix Icon Spacing */
|
||||
.rc-input-prefix {
|
||||
@apply mr-2 flex items-center self-center shrink-0;
|
||||
line-height: 0;
|
||||
}
|
||||
/* ------------------------------------------------
|
||||
1. VARIANT: OUTLINED (Default)
|
||||
------------------------------------------------ */
|
||||
|
||||
.rc-input-suffix {
|
||||
@apply ml-2 flex items-center self-center shrink-0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------
|
||||
LOGIC VARIANT & STATUS UNTUK WRAPPER
|
||||
-------------------------------------- */
|
||||
|
||||
/* Outlined - Normal */
|
||||
.input-variant-outlined.input-status-normal.rc-input-affix-wrapper {
|
||||
/* DEFAULT */
|
||||
.input-variant-outlined.input-status-default {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
|
||||
/* Outlined - Error */
|
||||
.input-variant-outlined.input-status-error.rc-input-affix-wrapper {
|
||||
border-color: var(--color-error-500);
|
||||
/* Hover */
|
||||
.input-variant-outlined.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
/* Focus */
|
||||
.input-variant-outlined.input-status-default:focus,
|
||||
.input-variant-outlined.input-status-default.rc-input-affix-wrapper-focused {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Filled - Error/Warning (Background Berwarna) */
|
||||
.input-variant-filled.input-status-error.rc-input-affix-wrapper {
|
||||
/* ERROR */
|
||||
.input-variant-outlined.input-status-error {
|
||||
border-color: var(--color-error-500);
|
||||
z-index: 1;
|
||||
}
|
||||
.input-variant-outlined.input-status-error:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
||||
border-color: var(--color-error-600);
|
||||
}
|
||||
.input-variant-outlined.input-status-error:focus,
|
||||
.input-variant-outlined.input-status-error.rc-input-affix-wrapper-focused {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* WARNING */
|
||||
.input-variant-outlined.input-status-warning {
|
||||
border-color: var(--color-warning-500);
|
||||
z-index: 1;
|
||||
}
|
||||
.input-variant-outlined.input-status-warning:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
||||
border-color: var(--color-warning-600);
|
||||
}
|
||||
.input-variant-outlined.input-status-warning:focus,
|
||||
.input-variant-outlined.input-status-warning.rc-input-affix-wrapper-focused {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* SUCCESS */
|
||||
.input-variant-outlined.input-status-success {
|
||||
border-color: var(--color-success-500);
|
||||
z-index: 1;
|
||||
}
|
||||
.input-variant-outlined.input-status-success:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
||||
border-color: var(--color-success-600);
|
||||
}
|
||||
.input-variant-outlined.input-status-success:focus,
|
||||
.input-variant-outlined.input-status-success.rc-input-affix-wrapper-focused {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* INFO */
|
||||
.input-variant-outlined.input-status-info {
|
||||
border-color: var(--color-info-500);
|
||||
z-index: 1;
|
||||
}
|
||||
.input-variant-outlined.input-status-info:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
||||
border-color: var(--color-info-600);
|
||||
}
|
||||
.input-variant-outlined.input-status-info:focus,
|
||||
.input-variant-outlined.input-status-info.rc-input-affix-wrapper-focused {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------
|
||||
2. VARIANT: FILLED
|
||||
------------------------------------------------ */
|
||||
|
||||
/* DEFAULT FILLED */
|
||||
.input-variant-filled.input-status-default {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-variant-filled.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-variant-filled.input-status-default:focus,
|
||||
.input-variant-filled.input-status-default.rc-input-affix-wrapper-focused {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* ERROR FILLED */
|
||||
.input-variant-filled.input-status-error {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
/* Saat focus, background jadi default input-bg (putih) */
|
||||
.input-variant-filled.input-status-error:focus,
|
||||
.input-variant-filled.input-status-error.rc-input-affix-wrapper-focused {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-error-500);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-warning.rc-input-affix-wrapper {
|
||||
/* WARNING FILLED */
|
||||
.input-variant-filled.input-status-warning {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.input-variant-filled.input-status-warning:focus,
|
||||
.input-variant-filled.input-status-warning.rc-input-affix-wrapper-focused {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-warning-500);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-success.rc-input-affix-wrapper {
|
||||
/* SUCCESS FILLED */
|
||||
.input-variant-filled.input-status-success {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-variant-filled.input-status-success:focus,
|
||||
.input-variant-filled.input-status-success.rc-input-affix-wrapper-focused {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-success-500);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-info.rc-input-affix-wrapper {
|
||||
/* INFO FILLED */
|
||||
.input-variant-filled.input-status-info {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* State Focus (Input aktif) */
|
||||
.rc-input-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
border-color: var(--focus-border-color) !important;
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color) !important;
|
||||
.input-variant-filled.input-status-info:focus,
|
||||
.input-variant-filled.input-status-info.rc-input-affix-wrapper-focused {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-info-500);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,161 +1,180 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
TEXTAREA STYLES
|
||||
Adapts the same logic as Input but for Multiline
|
||||
========================================= */
|
||||
|
||||
.rc-textarea {
|
||||
/* Tambahan wajib untuk menjamin lebar akurat */
|
||||
box-sizing: border-box;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 80px; /* Default height for textarea */
|
||||
padding: 8px 12px; /* Needs vertical padding unlike Input */
|
||||
|
||||
/* Menggunakan Variable Dimensi Textarea */
|
||||
min-height: var(--textarea-min-height);
|
||||
padding: var(--textarea-padding-y) var(--textarea-padding-x);
|
||||
|
||||
font-size: var(--input-font-size);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
/* Default Background (White) */
|
||||
/* Default Background */
|
||||
background-color: var(--input-bg);
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
|
||||
/* Transisi standar */
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
resize: vertical; /* Only allow vertical resizing */
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Placeholder Styling */
|
||||
.rc-textarea::placeholder {
|
||||
color: var(--input-placeholder);
|
||||
opacity: 1;
|
||||
opacity: 1; /* Firefox fix */
|
||||
}
|
||||
|
||||
.rc-textarea:disabled {
|
||||
/* Disabled State */
|
||||
.rc-textarea:disabled,
|
||||
.rc-textarea[disabled] {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
border-color: var(--disabled-border) !important;
|
||||
cursor: not-allowed;
|
||||
opacity: 1; /* iOS fix */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. VARIANT: OUTLINED (Textarea)
|
||||
Always White Background. Changes Border only.
|
||||
WRAPPER (untuk showCount)
|
||||
========================================= */
|
||||
.rc-textarea-affix-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. VARIANT: OUTLINED
|
||||
========================================= */
|
||||
|
||||
/* Normal */
|
||||
.textarea-variant-outlined.textarea-status-normal {
|
||||
/* --- Default --- */
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-default {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-normal:hover {
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-default:hover:not(:disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-normal:focus {
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-default:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Error (White BG, Red Border) */
|
||||
.textarea-variant-outlined.textarea-status-error {
|
||||
/* --- Error --- */
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-error {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-error:hover,
|
||||
.textarea-variant-outlined.textarea-status-error:focus {
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-error:hover:not(:disabled),
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-error:focus {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* Warning (White BG, Amber Border) */
|
||||
.textarea-variant-outlined.textarea-status-warning {
|
||||
/* --- Warning --- */
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-warning {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-warning:hover,
|
||||
.textarea-variant-outlined.textarea-status-warning:focus {
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-warning:hover:not(:disabled),
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-warning:focus {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Success (White BG, Green Border) */
|
||||
.textarea-variant-outlined.textarea-status-success {
|
||||
/* --- Success --- */
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-success {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-success:hover,
|
||||
.textarea-variant-outlined.textarea-status-success:focus {
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-success:hover:not(:disabled),
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-success:focus {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Info (White BG, Green Border) */
|
||||
.textarea-variant-outlined.textarea-status-info {
|
||||
/* --- Info --- */
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-info {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-info:hover,
|
||||
.textarea-variant-outlined.textarea-status-info:focus {
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-info:hover:not(:disabled),
|
||||
.rc-textarea.textarea-variant-outlined.textarea-status-info:focus {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. VARIANT: FILLED (Textarea)
|
||||
Normal = White.
|
||||
Error/Warning/Success/Info = Colored BG.
|
||||
2. VARIANT: FILLED
|
||||
========================================= */
|
||||
|
||||
/* Normal (Behaves like Outlined - White BG) */
|
||||
.textarea-variant-filled.textarea-status-normal {
|
||||
/* --- Default Filled --- */
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-default {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-normal:hover {
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-default:hover:not(:disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-normal:focus {
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-default:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Error (Red BG + Red Border) */
|
||||
.textarea-variant-filled.textarea-status-error {
|
||||
/* --- Error Filled --- */
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-error {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-error:focus {
|
||||
background-color: #fff; /* Optional: White on focus */
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-error:focus {
|
||||
background-color: var(--input-bg); /* Reset ke putih saat typing */
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* Warning (Amber BG + Amber Border) */
|
||||
.textarea-variant-filled.textarea-status-warning {
|
||||
/* --- Warning Filled --- */
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-warning {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-500);
|
||||
color: var(--color-warning-600);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-warning:focus {
|
||||
background-color: #fff;
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-warning:focus {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Success (Green BG + Green Border) */
|
||||
.textarea-variant-filled.textarea-status-success {
|
||||
/* --- Success Filled --- */
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-success {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-500);
|
||||
color: var(--color-success-600);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-success:focus {
|
||||
background-color: #fff;
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-success:focus {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Info (Blue BG + Blue Border) */
|
||||
.textarea-variant-filled.textarea-status-info {
|
||||
/* --- Info Filled --- */
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-info {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-500);
|
||||
color: var(--color-info-600);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-info:focus {
|
||||
background-color: #fff;
|
||||
.rc-textarea.textarea-variant-filled.textarea-status-info:focus {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
import RcTextArea from 'rc-textarea';
|
||||
import React, { forwardRef } from 'react';
|
||||
import RcTextArea, { TextAreaRef } from '@rc-component/textarea';
|
||||
import { InputStatusType, TextAreaProps, VALID_INPUT_STATUSES } from '../types';
|
||||
|
||||
export const TextArea = (props: TextAreaProps) => {
|
||||
export const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
|
||||
const { status, className, variant = 'outlined', ...restProps } = props;
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
|
||||
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
|
||||
|
||||
const computedClassName = [className, `textarea-status-${currentStatus}`, `textarea-variant-${variant}`]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return <RcTextArea className={computedClassName} {...restProps} />;
|
||||
};
|
||||
return <RcTextArea ref={ref} className={computedClassName} {...restProps} />;
|
||||
});
|
||||
|
||||
TextArea.displayName = 'TextArea';
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import type { FormProps as RcFormProps } from 'rc-field-form';
|
||||
import type { Rule } from 'rc-field-form/lib/interface';
|
||||
import type { FormProps as RcFormProps } from '@rc-component/form';
|
||||
import type { Rule } from '@rc-component/form/lib/interface';
|
||||
import { ReactNode, ReactElement } from 'react';
|
||||
import { InputProps as RcInputProps } from 'rc-input';
|
||||
import { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
|
||||
import { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
|
||||
|
||||
import { InputProps as RcInputProps } from '@rc-component/input';
|
||||
import { TextAreaProps as RcTextAreaProps } from '@rc-component/textarea';
|
||||
import { InputNumberProps as RcInputNumberProps } from '@rc-component/input-number';
|
||||
|
||||
/**
|
||||
* Define possible input statuses
|
||||
*/
|
||||
export type InputStatusType = 'normal' | 'error' | 'warning' | 'success' | 'info';
|
||||
export const VALID_INPUT_STATUSES: InputStatusType[] = ['normal', 'error', 'warning', 'success', 'info'];
|
||||
export type InputStatusType = 'default' | 'error' | 'warning' | 'success' | 'info';
|
||||
export const VALID_INPUT_STATUSES: InputStatusType[] = ['default', 'error', 'warning', 'success', 'info'];
|
||||
|
||||
/**
|
||||
* Define form props
|
||||
|
||||
+117
-134
@@ -1,25 +1,136 @@
|
||||
@import 'tailwindcss';
|
||||
@source "../src";
|
||||
|
||||
/* Vendor overrides */
|
||||
/* Import Component Styles */
|
||||
@import './components/forms/styles/form.style.css';
|
||||
|
||||
/* =========================================
|
||||
BASE STYLES & RESETS
|
||||
Ensures consistent typography and form styling
|
||||
THEME VARIABLES (CENTRALIZED)
|
||||
========================================= */
|
||||
@theme {
|
||||
/* -------------------------------
|
||||
BASE FONT & TYPOGRAPHY
|
||||
------------------------------- */
|
||||
--base-font-size: 13px;
|
||||
|
||||
/* Scale */
|
||||
--text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
|
||||
--text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
|
||||
--text-base: var(--base-font-size); /* 13px */
|
||||
--text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
|
||||
--text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
|
||||
--text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */
|
||||
|
||||
/* Weights */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* -------------------------------
|
||||
SHAPE & DEPTH
|
||||
------------------------------- */
|
||||
--radius-sm: 0.125rem; /* 2px */
|
||||
--radius-md: 0.25rem; /* 4px */
|
||||
--radius-lg: 0.5rem; /* 8px */
|
||||
--radius-xl: 0.75rem; /* 12px */
|
||||
|
||||
/* -------------------------------
|
||||
FORM DIMENSIONS (INPUT / TEXTAREA)
|
||||
------------------------------- */
|
||||
--input-height: 2.6rem; /* ~34px */
|
||||
--input-font-size: var(--text-base);
|
||||
--input-padding-x: 0.92rem; /* ~12px */
|
||||
--input-padding-y: 0.62rem; /* ~8px */
|
||||
--input-radius: 0.375rem; /* 6px */
|
||||
|
||||
/* Input Number Specific */
|
||||
--input-handler-width: 1.5rem; /* 24px (Agak diperlebar dikit agar clickable) */
|
||||
|
||||
/* Textarea Specific */
|
||||
--textarea-min-height: 6.15rem; /* 80px */
|
||||
--textarea-padding-x: 0.92rem; /* 12px */
|
||||
--textarea-padding-y: 0.62rem; /* 8px */
|
||||
|
||||
/* -------------------------------
|
||||
COLORS: PALETTE
|
||||
------------------------------- */
|
||||
/* Brand (Purple based on your code) */
|
||||
--color-brand-50: #f5f3fd;
|
||||
--color-brand-100: #e6dbfb;
|
||||
--color-brand-200: #d0b6f8;
|
||||
--color-brand-300: #b78ff5;
|
||||
--color-brand-400: #9f64f1;
|
||||
--color-brand-500: #7d39ed; /* Primary */
|
||||
--color-brand-600: #652ed9;
|
||||
--color-brand-700: #4a23a5;
|
||||
--color-brand-800: #321a7a;
|
||||
--color-brand-900: #1b0f4a;
|
||||
|
||||
/* Neutrals */
|
||||
--color-gray-50: #f5f6f7;
|
||||
--color-gray-100: #eceff1;
|
||||
--color-gray-200: #e0e3e7;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
|
||||
/* Semantics */
|
||||
--color-error-50: #fef2f2;
|
||||
--color-error-100: #fee2e2;
|
||||
--color-error-500: #ef4444;
|
||||
--color-error-600: #dc2626;
|
||||
|
||||
--color-warning-50: #fffbeb;
|
||||
--color-warning-100: #fef3c7;
|
||||
--color-warning-500: #f59e0b;
|
||||
--color-warning-600: #d97706;
|
||||
|
||||
--color-success-50: #f0fdf4;
|
||||
--color-success-100: #dcfce7;
|
||||
--color-success-500: #22c55e;
|
||||
--color-success-600: #16a34a;
|
||||
|
||||
--color-info-50: #f0f9ff;
|
||||
--color-info-100: #e0f2fe;
|
||||
--color-info-500: #0ea5e9;
|
||||
--color-info-600: #0284c7;
|
||||
|
||||
/* -------------------------------
|
||||
COLORS: COMPONENT MAPPING
|
||||
------------------------------- */
|
||||
--input-bg: #ffffff;
|
||||
--input-border: var(--color-gray-300);
|
||||
--input-border-hover: var(--color-brand-400);
|
||||
--input-text: var(--color-gray-800);
|
||||
--input-placeholder: var(--color-gray-400);
|
||||
|
||||
--focus-ring-color: var(--color-brand-100);
|
||||
--focus-border-color: var(--color-brand-500);
|
||||
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-text: var(--color-gray-400);
|
||||
--disabled-border: #e5e7eb;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
BASE RESETS
|
||||
========================================= */
|
||||
@layer base {
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
/* background-color: var(--color-gray-50); */
|
||||
background-color: #ffffff;
|
||||
color: var(--color-gray-800);
|
||||
@apply text-base; /* Set global base font to 13px */
|
||||
font-size: var(--base-font-size);
|
||||
line-height: var(--text-base--line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Form elements inherit base font styles */
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
@@ -28,132 +139,4 @@
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Table headers: consistent style with enterprise Fiori design */
|
||||
th {
|
||||
@apply text-gray-500 font-medium text-left border-b border-gray-200 py-2 px-3;
|
||||
}
|
||||
}
|
||||
|
||||
@theme {
|
||||
/* =========================================
|
||||
1. BRAND COLORS (Company Identity)
|
||||
========================================= */
|
||||
--color-brand-50: #f5f3fd;
|
||||
--color-brand-100: #e6dbfb;
|
||||
--color-brand-200: #d0b6f8;
|
||||
--color-brand-300: #b78ff5;
|
||||
--color-brand-400: #9f64f1;
|
||||
--color-brand-500: #7d39ed; /* Primary color for main ERP actions */
|
||||
--color-brand-600: #652ed9;
|
||||
--color-brand-700: #4a23a5;
|
||||
--color-brand-800: #321a7a;
|
||||
--color-brand-900: #1b0f4a;
|
||||
--color-brand-950: #0d0726;
|
||||
|
||||
/* =========================================
|
||||
2. ENTERPRISE NEUTRALS (SAP Fiori Inspired)
|
||||
Override default Tailwind gray palette to match enterprise style
|
||||
========================================= */
|
||||
--color-gray-50: #f5f6f7; /* Canvas or background of pages */
|
||||
--color-gray-100: #eceff1; /* Shell/Header background */
|
||||
--color-gray-200: #e0e3e7; /* Subtle borders for tables/separators */
|
||||
--color-gray-300: #d1d5db; /* Strong borders, e.g., input fields */
|
||||
--color-gray-400: #9ca3af; /* Disabled elements */
|
||||
--color-gray-500: #6b7280; /* Metadata, labels */
|
||||
--color-gray-600: #4b5563; /* Secondary body text */
|
||||
--color-gray-700: #374151; /* Primary body text */
|
||||
--color-gray-800: #1f2937; /* Section headers */
|
||||
--color-gray-900: #111827; /* Page titles */
|
||||
|
||||
/* =========================================
|
||||
3. SEMANTIC COLORS (Status Indicators)
|
||||
Professional colors for business contexts (errors, success, warnings)
|
||||
========================================= */
|
||||
/* Error - Rose/Ruby Soft Palette */
|
||||
--color-error-50: #fef2f2;
|
||||
--color-error-100: #fee2e2;
|
||||
--color-error-500: #ef4444; /* Standard Modern Red */
|
||||
--color-error-600: #dc2626;
|
||||
|
||||
/* Success - Emerald/Mint Soft Palette */
|
||||
--color-success-50: #f0fdf4;
|
||||
--color-success-100: #dcfce7;
|
||||
--color-success-500: #22c55e; /* Modern Green, more vibrant but clean */
|
||||
--color-success-600: #16a34a;
|
||||
|
||||
/* Warning - Amber/Honey Soft Palette */
|
||||
--color-warning-50: #fffbeb;
|
||||
--color-warning-100: #fef3c7;
|
||||
--color-warning-500: #f59e0b; /* Warm Amber, less "harsh" than pure orange */
|
||||
--color-warning-600: #d97706;
|
||||
|
||||
/* Info - Sky/Azure Soft Palette (Optional for ERP) */
|
||||
--color-info-50: #f0f9ff;
|
||||
--color-info-100: #e0f2fe;
|
||||
--color-info-500: #0ea5e9;
|
||||
--color-info-600: #0284c7;
|
||||
|
||||
/* =========================================
|
||||
4. TYPOGRAPHY (Base font size: 13px)
|
||||
Override Tailwind default text sizes for consistent UI
|
||||
========================================= */
|
||||
--text-xs: 0.6875rem; /* 11px - Captions or minor labels */
|
||||
--text-xs--line-height: 1rem;
|
||||
|
||||
--text-sm: 0.75rem; /* 12px - Secondary text */
|
||||
--text-sm--line-height: 1.125rem;
|
||||
|
||||
--text-base: 0.8125rem; /* 13px - Default body text */
|
||||
--text-base--line-height: 1.25rem; /* Comfortable reading spacing */
|
||||
|
||||
--text-lg: 0.9375rem; /* 15px - Section headers */
|
||||
--text-lg--line-height: 1.5rem;
|
||||
|
||||
--text-xl: 1.125rem; /* 18px - Card or page titles */
|
||||
--text-xl--line-height: 1.75rem;
|
||||
|
||||
--text-2xl: 1.375rem; /* 22px - Dashboard headers */
|
||||
--text-2xl--line-height: 2rem;
|
||||
|
||||
/* Font weights */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500; /* Recommended for table headers */
|
||||
--font-weight-semibold: 600; /* Highlight important data points */
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* =========================================
|
||||
5. SHAPE & DEPTH (UI Consistency)
|
||||
Border radius and shadow presets for consistent UI
|
||||
========================================= */
|
||||
--radius-sm: 0.125rem; /* 2px - small elements like badges/checkboxes */
|
||||
--radius-md: 0.25rem; /* 4px - default buttons/inputs */
|
||||
--radius-lg: 0.5rem; /* 8px - card containers */
|
||||
--radius-xl: 0.75rem; /* 12px - modal dialogs */
|
||||
|
||||
/* Shadow presets for depth */
|
||||
--shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* =========================================
|
||||
FORM VARIABLES (Compact ERP Settings)
|
||||
========================================= */
|
||||
--input-height: 34px; /* Compact height for ERP */
|
||||
--input-radius: 6px; /* Modern slightly rounded */
|
||||
--input-font-size: 14px;
|
||||
--input-padding-x: 11px;
|
||||
--input-handler-width: 22px;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #d1d5db; /* Slate-300 equivalent */
|
||||
--input-border-hover: var(--color-brand-400);
|
||||
--input-placeholder: #9ca3af; /* Slate-400 equivalent */
|
||||
--input-text: #1f2937; /* Slate-800 equivalent */
|
||||
|
||||
--focus-ring-color: var(--color-brand-100);
|
||||
--focus-border-color: var(--color-brand-500);
|
||||
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-text: #9ca3af;
|
||||
--disabled-border: #e5e7eb;
|
||||
}
|
||||
|
||||
@@ -5,8 +5,9 @@ describe('CurrencyService', () => {
|
||||
let currency: CurrencyService;
|
||||
|
||||
beforeEach(() => {
|
||||
// Reset global prefix before each test
|
||||
// Reset global prefix and decimal separator before each test
|
||||
CurrencyService.setGlobalPrefix('Rp ');
|
||||
CurrencyService.setGlobalDecimalSeparator(',');
|
||||
|
||||
// Mock console to keep tests clean
|
||||
vi.spyOn(console, 'warn').mockImplementation(() => {});
|
||||
@@ -38,6 +39,26 @@ describe('CurrencyService', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Global Decimal Separator', () => {
|
||||
it('should set and get global decimal separator', () => {
|
||||
CurrencyService.setGlobalDecimalSeparator('.');
|
||||
expect(CurrencyService.getGlobalDecimalSeparator()).toBe('.');
|
||||
});
|
||||
|
||||
it('should use global decimal separator if instance separator is not provided', () => {
|
||||
CurrencyService.setGlobalDecimalSeparator('.');
|
||||
const c = new CurrencyService();
|
||||
expect(c.format(1234.56)).toBe('Rp 1,234.56');
|
||||
expect(c.parse('Rp 1,234.56')).toBe('1234.56');
|
||||
});
|
||||
|
||||
it('should override instance decimal separator', () => {
|
||||
const c = new CurrencyService({ decimalSeparator: '.' });
|
||||
expect(c.format(1234.56)).toBe('Rp 1,234.56');
|
||||
expect(c.parse('Rp 1,234.56')).toBe('1234.56');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Formatting', () => {
|
||||
it('should format integer without decimalScale', () => {
|
||||
expect(currency.format(1234567)).toBe('Rp 1.234.567');
|
||||
@@ -74,12 +95,6 @@ describe('CurrencyService', () => {
|
||||
expect(currency.parse('Rp 1.234,5678')).toBe('1234.5678');
|
||||
});
|
||||
|
||||
it('should handle different decimal separators', () => {
|
||||
const c = new CurrencyService({ decimalSeparator: '.' });
|
||||
expect(c.format(1234.56)).toBe('Rp 1,234.56');
|
||||
expect(c.parse('Rp 1,234.56')).toBe('1234.56');
|
||||
});
|
||||
|
||||
it('should return empty string for null or undefined input', () => {
|
||||
expect(currency.parse(null)).toBe('');
|
||||
expect(currency.parse(undefined)).toBe('');
|
||||
|
||||
@@ -38,11 +38,14 @@ export class CurrencyService {
|
||||
* ---------------------------------------------------------------- */
|
||||
private static _globalPrefix: string = 'Rp ';
|
||||
|
||||
/** Global default decimal separator shared across all instances */
|
||||
private static _globalDecimalSeparator: ',' | '.' = ',';
|
||||
|
||||
/** Instance prefix, defaults to global prefix */
|
||||
private readonly prefix: string;
|
||||
|
||||
/** Character used as decimal separator for display */
|
||||
private readonly decimalSeparator: string;
|
||||
private readonly decimalSeparator: ',' | '.';
|
||||
|
||||
/** Optional number of decimal digits for display rounding */
|
||||
private readonly decimalScale?: number;
|
||||
@@ -58,7 +61,7 @@ export class CurrencyService {
|
||||
*/
|
||||
constructor(options?: CurrencyOptions) {
|
||||
this.prefix = options?.prefix ?? CurrencyService._globalPrefix;
|
||||
this.decimalSeparator = options?.decimalSeparator ?? ',';
|
||||
this.decimalSeparator = options?.decimalSeparator ?? CurrencyService._globalDecimalSeparator;
|
||||
this.decimalScale = options?.decimalScale;
|
||||
this.thousandSeparator = this.decimalSeparator === ',' ? '.' : ',';
|
||||
}
|
||||
@@ -86,6 +89,18 @@ export class CurrencyService {
|
||||
return CurrencyService._globalPrefix;
|
||||
}
|
||||
|
||||
/** ------------------------------------------------------------
|
||||
* Global decimal separator management
|
||||
* ------------------------------------------------------------ */
|
||||
|
||||
static setGlobalDecimalSeparator(separator: ',' | '.') {
|
||||
CurrencyService._globalDecimalSeparator = separator;
|
||||
}
|
||||
|
||||
static getGlobalDecimalSeparator(): ',' | '.' {
|
||||
return CurrencyService._globalDecimalSeparator;
|
||||
}
|
||||
|
||||
/** ------------------------------------------------------------
|
||||
* Formatter (DISPLAY ONLY)
|
||||
* ------------------------------------------------------------ */
|
||||
|
||||
Generated
+97
-103
@@ -158,24 +158,24 @@ importers:
|
||||
|
||||
packages/ui:
|
||||
dependencies:
|
||||
'@rc-component/form':
|
||||
specifier: ^1.6.2
|
||||
version: 1.6.2(react-dom@19.2.3)(react@19.2.3)
|
||||
'@rc-component/input':
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2(react-dom@19.2.3)(react@19.2.3)
|
||||
'@rc-component/input-number':
|
||||
specifier: ^1.6.2
|
||||
version: 1.6.2(react-dom@19.2.3)(react@19.2.3)
|
||||
'@rc-component/textarea':
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2(react-dom@19.2.3)(react@19.2.3)
|
||||
'@repo/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../utils
|
||||
'@tailwindcss/vite':
|
||||
specifier: ^4.1.18
|
||||
version: 4.1.18(vite@5.4.17)
|
||||
rc-field-form:
|
||||
specifier: ^2.7.1
|
||||
version: 2.7.1(react-dom@19.2.3)(react@19.2.3)
|
||||
rc-input:
|
||||
specifier: ^1.8.0
|
||||
version: 1.8.0(react-dom@19.2.3)(react@19.2.3)
|
||||
rc-input-number:
|
||||
specifier: ^9.5.0
|
||||
version: 9.5.0(react-dom@19.2.3)(react@19.2.3)
|
||||
rc-textarea:
|
||||
specifier: ^1.10.2
|
||||
version: 1.10.2(react-dom@19.2.3)(react@19.2.3)
|
||||
react:
|
||||
specifier: ^19.2.3
|
||||
version: 19.2.3
|
||||
@@ -1145,6 +1145,45 @@ packages:
|
||||
'@babel/runtime': 7.28.4
|
||||
dev: false
|
||||
|
||||
/@rc-component/form@1.6.2(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-OgIn2RAoaSBqaIgzJf/X6iflIa9LpTozci1lagLBdURDFhGA370v0+T0tXxOi8YShMjTha531sFhwtnrv+EJaQ==}
|
||||
engines: {node: '>=8.x'}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@rc-component/async-validator': 5.1.0
|
||||
'@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
|
||||
clsx: 2.1.1
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/@rc-component/input-number@1.6.2(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-Gjcq7meZlCOiWN1t1xCC+7/s85humHVokTBI7PJgTfoyw5OWF74y3e6P8PHX104g9+b54jsodFIzyaj6p8LI9w==}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@rc-component/mini-decimal': 1.1.0
|
||||
'@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
|
||||
clsx: 2.1.1
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/@rc-component/input@1.1.2(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-Q61IMR47piUBudgixJ30CciKIy9b1H95qe7GgEKOmSJVJXvFRWJllJfQry9tif+MX2cWFXWJf/RXz4kaCeq/Fg==}
|
||||
peerDependencies:
|
||||
react: '>=16.0.0'
|
||||
react-dom: '>=16.0.0'
|
||||
dependencies:
|
||||
'@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
|
||||
clsx: 2.1.1
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/@rc-component/mini-decimal@1.1.0:
|
||||
resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==}
|
||||
engines: {node: '>=8.x'}
|
||||
@@ -1152,6 +1191,43 @@ packages:
|
||||
'@babel/runtime': 7.28.4
|
||||
dev: false
|
||||
|
||||
/@rc-component/resize-observer@1.1.1(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-NfXXMmiR+SmUuKE1NwJESzEUYUFWIDUn2uXpxCTOLwiRUUakd62DRNFjRJArgzyFW8S5rsL4aX5XlyIXyC/vRA==}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/@rc-component/textarea@1.1.2(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-9rMUEODWZDMovfScIEHXWlVZuPljZ2pd1LKNjslJVitn4SldEzq5vO1CL3yy3Dnib6zZal2r2DPtjy84VVpF6A==}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@rc-component/input': 1.1.2(react-dom@19.2.3)(react@19.2.3)
|
||||
'@rc-component/resize-observer': 1.1.1(react-dom@19.2.3)(react@19.2.3)
|
||||
'@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
|
||||
clsx: 2.1.1
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/@rc-component/util@1.7.0(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-tIvIGj4Vl6fsZFvWSkYw9sAfiCKUXMyhVz6kpKyZbwyZyRPqv2vxYZROdaO1VB4gqTNvUZFXh6i3APUiterw5g==}
|
||||
peerDependencies:
|
||||
react: '>=18.0.0'
|
||||
react-dom: '>=18.0.0'
|
||||
dependencies:
|
||||
is-mobile: 5.0.0
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
react-is: 18.3.1
|
||||
dev: false
|
||||
|
||||
/@rolldown/pluginutils@1.0.0-beta.53:
|
||||
resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
|
||||
dev: true
|
||||
@@ -3195,10 +3271,6 @@ packages:
|
||||
engines: {node: '>=8'}
|
||||
dev: false
|
||||
|
||||
/classnames@2.5.1:
|
||||
resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
|
||||
dev: false
|
||||
|
||||
/clean-regexp@1.0.0:
|
||||
resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
|
||||
engines: {node: '>=4'}
|
||||
@@ -3220,6 +3292,11 @@ packages:
|
||||
is-wsl: 2.2.0
|
||||
dev: true
|
||||
|
||||
/clsx@2.1.1:
|
||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/color-convert@2.0.1:
|
||||
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
|
||||
engines: {node: '>=7.0.0'}
|
||||
@@ -4738,6 +4815,10 @@ packages:
|
||||
engines: {node: '>= 0.4'}
|
||||
dev: false
|
||||
|
||||
/is-mobile@5.0.0:
|
||||
resolution: {integrity: sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==}
|
||||
dev: false
|
||||
|
||||
/is-negative-zero@2.0.3:
|
||||
resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -6055,89 +6136,6 @@ packages:
|
||||
engines: {node: '>= 0.6'}
|
||||
dev: true
|
||||
|
||||
/rc-field-form@2.7.1(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-vKeSifSJ6HoLaAB+B8aq/Qgm8a3dyxROzCtKNCsBQgiverpc4kWDQihoUwzUj+zNWJOykwSY4dNX3QrGwtVb9A==}
|
||||
engines: {node: '>=8.x'}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
'@rc-component/async-validator': 5.1.0
|
||||
rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/rc-input-number@9.5.0(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-bKaEvB5tHebUURAEXw35LDcnRZLq3x1k7GxfAqBMzmpHkDGzjAtnUL8y4y5N15rIFIg5IJgwr211jInl3cipag==}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
'@rc-component/mini-decimal': 1.1.0
|
||||
classnames: 2.5.1
|
||||
rc-input: 1.8.0(react-dom@19.2.3)(react@19.2.3)
|
||||
rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/rc-input@1.8.0(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-KXvaTbX+7ha8a/k+eg6SYRVERK0NddX8QX7a7AnRvUa/rEH0CNMlpcBzBkhI0wp2C8C4HlMoYl8TImSN+fuHKA==}
|
||||
peerDependencies:
|
||||
react: '>=16.0.0'
|
||||
react-dom: '>=16.0.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
classnames: 2.5.1
|
||||
rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/rc-resize-observer@1.4.3(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-YZLjUbyIWox8E9i9C3Tm7ia+W7euPItNWSPX5sCcQTYbnwDb5uNpnLHQCG1f22oZWUhLw4Mv2tFmeWe68CDQRQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
classnames: 2.5.1
|
||||
rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
resize-observer-polyfill: 1.5.1
|
||||
dev: false
|
||||
|
||||
/rc-textarea@1.10.2(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-HfaeXiaSlpiSp0I/pvWpecFEHpVysZ9tpDLNkxQbMvMz6gsr7aVZ7FpWP9kt4t7DB+jJXesYS0us1uPZnlRnwQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
classnames: 2.5.1
|
||||
rc-input: 1.8.0(react-dom@19.2.3)(react@19.2.3)
|
||||
rc-resize-observer: 1.4.3(react-dom@19.2.3)(react@19.2.3)
|
||||
rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/rc-util@5.44.4(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==}
|
||||
peerDependencies:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
react-is: 18.3.1
|
||||
dev: false
|
||||
|
||||
/rc@1.2.8:
|
||||
resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
|
||||
hasBin: true
|
||||
@@ -6364,10 +6362,6 @@ packages:
|
||||
engines: {node: '>=0.10.5'}
|
||||
dev: false
|
||||
|
||||
/resize-observer-polyfill@1.5.1:
|
||||
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
|
||||
dev: false
|
||||
|
||||
/resolve-from@4.0.0:
|
||||
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
Reference in New Issue
Block a user