New Captcha Package added

2026-07-25 13:38:18 +05:30
parent d0aded0392
commit 8b728a3e5d
157 changed files with 12092 additions and 1913 deletions
@@ -245,6 +245,15 @@ function sampleValue(prop, component, variation) {
    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
    return undefined;
  }
+  if (component.name === "InputNumber") {
+    const configuration = inputNumberConfiguration(variation);
+
+    if (Object.hasOwn(configuration, prop.name)) {
+      return configuration[prop.name];
+    }
+
+    return undefined;
+  }
  const isArray = prop.default === "[]" || prop.type.includes("[]") || prop.type === "array";
  const isObject = prop.default === "{}" || prop.type === "object";
  if (isArray) return sampleArray(prop, component, variation);
@@ -1096,20 +1105,192 @@ function togglePasswordConfiguration(variation) {
  };
 }

-const demoUses = (component) =>
-  component.name === "Button"
-    ? buttonUses
-    : component.name === "AdvancedSelect"
-      ? advancedSelectUses
-      : component.name === "ComboBox"
-        ? comboboxUses
-        : component.name === "PinInput"
-          ? pinInputUses
-          : component.name === "StrongPassword"
-            ? strongPasswordUses
-            : component.name === "TogglePassword"
-              ? togglePasswordUses
-              : defaultUses;
+const inputNumberUses = [
+  {
+    eyebrow: "Basic usage",
+    title: "Default controls",
+    description: "Use standard decrement and increment buttons alongside a numeric input field.",
+  },
+  {
+    eyebrow: "Basic usage",
+    title: "Labeled input style",
+    description:
+      "Add supporting label text and rounded controls for a more form-like number input.",
+  },
+  {
+    eyebrow: "Layout",
+    title: "Vertical buttons",
+    description: "Stack the increment and decrement buttons vertically beside the field.",
+  },
+  {
+    eyebrow: "Layout",
+    title: "Horizontal buttons",
+    description: "Place the increment and decrement buttons on opposite sides of the value.",
+  },
+  {
+    eyebrow: "Sizing",
+    title: "Compact size",
+    description: "Use a smaller compact control when the available space is limited.",
+  },
+  {
+    eyebrow: "Commerce",
+    title: "Seat quantity selector",
+    description: "Pair the control with pricing information for seat counts or plan add-ons.",
+  },
+  {
+    eyebrow: "States",
+    title: "Disabled input",
+    description: "Disable manual entry while keeping supported quantity controls available.",
+  },
+  {
+    eyebrow: "States",
+    title: "Disabled buttons",
+    description:
+      "Disable increment and decrement controls while leaving the current value visible.",
+  },
+  {
+    eyebrow: "Behaviour",
+    title: "Custom step size",
+    description: "Set a custom step so every button press changes the value by two.",
+  },
+  {
+    eyebrow: "Limits",
+    title: "Negative values",
+    description: "Use the min option to permit controlled negative values.",
+  },
+  {
+    eyebrow: "Limits",
+    title: "Maximum limit",
+    description: "Set an upper limit and disable incrementing when that limit is reached.",
+  },
+  {
+    eyebrow: "Validation",
+    title: "Validation states",
+    description: "Communicate whether the current numerical value is valid.",
+  },
+];
+
+function inputNumberConfiguration(variation) {
+  const configurations = [
+    {
+      name: "default-quantity",
+      value: 1,
+      min: 0,
+      max: 99,
+      step: 1,
+      variant: "default",
+    },
+    {
+      name: "labeled-quantity",
+      label: "Select quantity",
+      value: 1,
+      min: 1,
+      max: 25,
+      step: 1,
+      variant: "labeled",
+    },
+    {
+      name: "vertical-quantity",
+      label: "Select quantity",
+      value: 1,
+      min: 0,
+      max: 20,
+      variant: "vertical",
+    },
+    {
+      name: "horizontal-quantity",
+      value: 1,
+      min: 0,
+      max: 20,
+      variant: "horizontal",
+    },
+    {
+      name: "compact-quantity",
+      value: 0,
+      min: 0,
+      max: 10,
+      variant: "compact",
+      size: "sm",
+    },
+    {
+      name: "additional-seats",
+      label: "Additional seats",
+      description: "$39 monthly",
+      value: 0,
+      min: 0,
+      max: 50,
+      variant: "seat",
+    },
+    {
+      name: "disabled-input",
+      value: 10,
+      inputDisabled: true,
+    },
+    {
+      name: "disabled-buttons",
+      value: 10,
+      buttonsDisabled: true,
+    },
+    {
+      name: "custom-step",
+      value: 0,
+      min: 0,
+      max: 20,
+      step: 2,
+    },
+    {
+      name: "negative-values",
+      value: -10,
+      min: -100,
+      max: 100,
+    },
+    {
+      name: "maximum-limit",
+      value: 10,
+      min: 0,
+      max: 10,
+      help: "The maximum value is 10.",
+    },
+    {
+      name: "invalid-quantity",
+      value: 10,
+      min: 0,
+      max: 5,
+      error: "Out of limit",
+    },
+  ];
+
+  return {
+    color: "primary",
+    size: "md",
+    ...configurations[variation],
+  };
+}
+
+function demoUses(component) {
+  switch (component.name) {
+    case "AdvancedSelect":
+      return advancedSelectUses;
+
+    case "ComboBox":
+      return comboboxUses;
+
+    case "InputNumber":
+      return inputNumberUses;
+
+    case "PinInput":
+      return pinInputUses;
+
+    case "StrongPassword":
+      return strongPasswordUses;
+
+    case "TogglePassword":
+      return togglePasswordUses;
+
+    default:
+      return defaultUses;
+  }
+}

 function eventDocumentation(component) {
  if (