refactor: remove variant prop from input components and styles

- Removed the variant prop from Checkbox, Input, InputNumber, Switch, TextArea components. - Updated styles to eliminate variant-specific classes for Checkbox, Input, InputNumber, TextArea, and Switch. - Simplified class names in stylesheets to focus on status only. - Adjusted documentation to reflect the removal of the variant prop.
2026-02-02 16:36:23 +07:00
parent 53da0c70bd
commit 2c21da111e
16 changed files with 164 additions and 676 deletions
@@ -33,8 +33,8 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
          <div className="p-4 border border-gray-100 rounded-xl bg-gray-50/50">
            <span className="block mb-3 text-xs font-bold text-gray-400 uppercase">Filled</span>
            <div className="flex gap-4">
-              <Checkbox variant="filled" status={overrideStatus} label="Standard" defaultChecked />
-              <Checkbox variant="filled" status={overrideStatus} label="Unchecked" />
+              <Checkbox status={overrideStatus} label="Standard" defaultChecked />
+              <Checkbox status={overrideStatus} label="Unchecked" />
            </div>
          </div>
        </div>
@@ -60,40 +60,6 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
            <Checkbox status={resolveStatus('success')} label={resolveStatus('success')} defaultChecked />
            <Checkbox status={resolveStatus('info')} label={resolveStatus('info')} defaultChecked />
          </div>
-
-          {/* Filled Status */}
-          <div className="flex flex-wrap gap-6 p-6 bg-gray-50 border border-gray-200 rounded-xl">
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('default')}
-              label={`${resolveStatus('default')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('error')}
-              label={`${resolveStatus('error')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('warning')}
-              label={`${resolveStatus('warning')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('success')}
-              label={`${resolveStatus('success')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('info')}
-              label={`${resolveStatus('info')} Filled`}
-              defaultChecked
-            />
-          </div>
        </div>
      </section>

@@ -124,7 +90,7 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
            <div className="flex flex-col gap-3">
              <Checkbox disabled label="Disabled Unchecked" />
              <Checkbox disabled defaultChecked label="Disabled Checked" />
-              <Checkbox disabled variant="filled" label="Disabled Filled" />
+              <Checkbox disabled label="Disabled Filled" />
            </div>
          </div>

@@ -69,75 +69,9 @@ export default function InputShowCase({ status }: { status?: InputStatusType })
        </div>
      </section>

-      {/* --- SECTION 2: FILLED VARIANT --- */}
-      <section className="space-y-6">
-        <h2 className="text-lg font-bold text-gray-800 border-b pb-2">Filled Variant</h2>
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <div className="space-y-3">
-            <Label>Basic Filled</Label>
-            <Input variant="filled" status={status} placeholder="Filled Input" />
-            <InputPassword variant="filled" status={status} placeholder="Filled Password" />
-            <InputNumber variant="filled" status={status} className="w-full" placeholder="Filled Number" />
-            <InputCurrency variant="filled" status={status} className="w-full" placeholder="Filled Currency" />
-            <TextArea variant="filled" status={status} placeholder="Filled TextArea" rows={2} />
-          </div>
+      {/* --- SECTION 2: Component States & Validation --- */}

-          <div className="space-y-3">
-            <Label>Filled + Prefix</Label>
-            <Input variant="filled" status={status} prefix={<Fix>ID</Fix>} placeholder="12345" />
-            <InputPassword variant="filled" status={status} prefix={<Fix>🔑</Fix>} placeholder="password" />
-            <InputNumber variant="filled" status={status} prefix={<Fix>Qty:</Fix>} className="w-full" />
-            <InputCurrency variant="filled" status={status} prefix="Rp " className="w-full" />
-          </div>
-
-          <div className="space-y-3">
-            <Label>Filled + Suffix</Label>
-            <Input variant="filled" status={status} suffix={<Fix>Optional</Fix>} placeholder="Full Name" />
-            <InputPassword variant="filled" status={status} suffix={<Fix>?</Fix>} placeholder="password" />
-            <InputNumber variant="filled" status={status} suffix={<Fix>pts</Fix>} className="w-full" />
-            <InputCurrency variant="filled" status={status} suffix={<Fix>tax-incl</Fix>} className="w-full" />
-          </div>
-          <div className="space-y-3">
-            <Label>Both & Special</Label>
-            <Input
-              variant="filled"
-              status={status}
-              prefix={<Fix>https://</Fix>}
-              suffix={<Fix>.io</Fix>}
-              placeholder="domain"
-            />
-            {/* Password Tanpa Toggle */}
-            <InputPassword
-              variant="filled"
-              status={status}
-              visibilityToggle={false}
-              prefix={<Fix>🔑</Fix>}
-              suffix={<Fix>?</Fix>}
-              placeholder="Hidden Password"
-            />
-            <InputNumber
-              variant="filled"
-              status={status}
-              prefix={<Fix>+</Fix>}
-              suffix={<Fix>%</Fix>}
-              className="w-full"
-              placeholder="tax"
-            />
-            <InputCurrency
-              variant="filled"
-              status={status}
-              prefix="USD "
-              suffix={<Fix>cents</Fix>}
-              className="w-full"
-              placeholder="amount"
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* --- SECTION 3: Component States & Validation --- */}
-
-      <section className="space-y-6">
+      <section className="space-y-6 mt-6">
        <h2 className="text-lg font-bold text-gray-800 border-b pb-2">Component States & Validation</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -181,11 +115,11 @@ export default function InputShowCase({ status }: { status?: InputStatusType })
          <div className="space-y-3">
            <Label>Error (Filled)</Label>
            <div className="space-y-3">
-              <Input variant="filled" status="error" placeholder="Invalid input" />
-              <InputPassword variant="filled" status="error" placeholder="Wrong password" />
-              <InputNumber variant="filled" status="error" className="w-full" placeholder="Out of range" />
-              <InputCurrency variant="filled" status="error" className="w-full" placeholder="Invalid amount" />
-              <TextArea variant="filled" status="error" placeholder="Error in message" rows={2} />
+              <Input status="error" placeholder="Invalid input" />
+              <InputPassword status="error" placeholder="Wrong password" />
+              <InputNumber status="error" className="w-full" placeholder="Out of range" />
+              <InputCurrency status="error" className="w-full" placeholder="Invalid amount" />
+              <TextArea status="error" placeholder="Error in message" rows={2} />
            </div>
          </div>
        </div>
@@ -25,8 +25,8 @@ export const SwitchShowcase = () => {
                <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Outlined (Default)</h3>
                <p className="text-xs text-gray-400 mb-2">Background transparan saat off.</p>
                <div className="flex flex-col gap-3">
-                  <Switch variant="outlined" label="Outlined Off" />
-                  <Switch variant="outlined" defaultChecked label="Outlined On" />
+                  <Switch label="Outlined Off" />
+                  <Switch defaultChecked label="Outlined On" />
                </div>
              </div>

@@ -35,8 +35,8 @@ export const SwitchShowcase = () => {
                <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Filled</h3>
                <p className="text-xs text-gray-400 mb-2">Background abu-abu solid saat off.</p>
                <div className="flex flex-col gap-3">
-                  <Switch variant="filled" label="Filled Off" />
-                  <Switch variant="filled" defaultChecked label="Filled On" />
+                  <Switch label="Filled Off" />
+                  <Switch defaultChecked label="Filled On" />
                </div>
              </div>
            </div>
@@ -53,27 +53,27 @@ export const SwitchShowcase = () => {
          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
              <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="default" defaultChecked />
+                <Switch status="default" defaultChecked />
                <span className="text-xs font-medium text-gray-500">Default (Brand)</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="success" defaultChecked />
+                <Switch status="success" defaultChecked />
                <span className="text-xs font-medium text-green-600">Success</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="warning" defaultChecked />
+                <Switch status="warning" defaultChecked />
                <span className="text-xs font-medium text-amber-600">Warning</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="error" defaultChecked />
+                <Switch status="error" defaultChecked />
                <span className="text-xs font-medium text-red-600">Error</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="info" defaultChecked />
+                <Switch status="info" defaultChecked />
                <span className="text-xs font-medium text-sky-600">Info</span>
              </div>
            </div>
@@ -82,27 +82,27 @@ export const SwitchShowcase = () => {
          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
              <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="default" defaultChecked />
+                <Switch status="default" defaultChecked />
                <span className="text-xs font-medium text-gray-500">Default (Brand)</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="success" defaultChecked />
+                <Switch status="success" defaultChecked />
                <span className="text-xs font-medium text-green-600">Success</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="warning" defaultChecked />
+                <Switch status="warning" defaultChecked />
                <span className="text-xs font-medium text-amber-600">Warning</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="error" defaultChecked />
+                <Switch status="error" defaultChecked />
                <span className="text-xs font-medium text-red-600">Error</span>
              </div>

              <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="info" defaultChecked />
+                <Switch status="info" defaultChecked />
                <span className="text-xs font-medium text-sky-600">Info</span>
              </div>
            </div>
@@ -209,7 +209,6 @@ export const SwitchShowcase = () => {
                loading={loading}
                label="Control Me"
                status="success"
-                variant="filled"
              />
            </div>
          </div>