sy-ui-lib 1.0.18 → 1.0.20

package/dist/components/Icon/SvgIcons.d.ts

@@ -77,4 +77,7 @@ export declare const icons: {
     casino: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
     kabaddi: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
     virtualEvents: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    currentOff: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    current: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    save: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/PhoneNumberInput/PhoneNumberInput.types.d.ts

@@ -1,6 +1,6 @@
 import { InputFieldProps } from '../InputField';
 /** Props associated with PhoneNumberInput component */
-export interface PhoneNumberInputProps extends Omit<InputFieldProps, "type" | "iconName" | "onClick" | "onChange" | "size"> {
+export interface PhoneNumberInputProps extends Omit<InputFieldProps, "type" | "iconName" | "onClick" | "onChange"> {
     /** Handler function called when the phone input value changes. Receives the new value as a string. */
     onChange?: (value: string) => void;
 }

package/dist/components/Toggle/Toggle.component.d.ts

@@ -12,11 +12,36 @@ import { ToggleProps } from './Toggle.types';
  * @param {string} [ariaLabel="Toggle"] Optional Accessibility label for the toggle button.
  * @param {string} [onColor] Optional Tailwind color class for the "on" state of the toggle knob.
  * @param {string} [offColor] Optional Tailwind color class for the "off" state of the toggle knob.
+ * @param {"sm" | "md"} [size="md"] Controls toggle dimensions
  *
- * Example usage:
+ * @param {Object} [content] Optional state-based UI configuration
+ * @param {{ icon?: IconName; text?: string }} [content.on] UI for "on" state
+ * @param {{ icon?: IconName; text?: string }} [content.off] UI for "off" state
+ *
+ * @example usage:
  * <Toggle checked={true} onChange={toggleHandler} />
  * <Toggle checked={false} disabled />
  * <Toggle checked={isOn} onChange={toggleHandler} onColor="bg-success" offColor="bg-error" />
+ *
+ * With content (icon + text):
+ * <Toggle
+ *   checked={isOn}
+ *   onChange={toggleHandler}
+ *   content={{
+ *     on: { icon: "check", text: "On" },
+ *     off: { icon: "close", text: "Off" }
+ *   }}
+ * />
+ *
+ * Icon only:
+ * <Toggle
+ *   checked={isOn}
+ *   onChange={toggleHandler}
+ *   content={{
+ *     on: { icon: "sun" },
+ *     off: { icon: "moon" }
+ *   }}
+ * />
  */
 declare const Toggle: React.FC<ToggleProps>;
 export default Toggle;

package/dist/components/Toggle/Toggle.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<ToggleProps>;
 export declare const ControlledToggle: Story;
 export declare const DisabledToggle: Story;
 export declare const CustomColorsToggle: Story;
+export declare const CompoundToggle: Story;

package/dist/components/Toggle/Toggle.types.d.ts

@@ -1,3 +1,12 @@
+import { IconName } from '../Icon';
+/** Available visual variants of the toggle component */
+export type ToggleVarinat = "default" | "compound";
+export type ToggleStateContent = {
+    /** Icon to display for a specific state */
+    icon?: IconName;
+    /** Text label to display for a specific state */
+    text?: string;
+};
 export interface ToggleProps {
     checked?: boolean;
     onChange: (checked: boolean) => void;
@@ -6,4 +15,12 @@ export interface ToggleProps {
     onColor?: string;
     offColor?: string;
     size?: "sm" | "md";
+    /** Defines the visual style/structure of the toggle */
+    variant?: ToggleVarinat;
+    content?: {
+        /** UI (icon/text) to render when toggle is ON */
+        on?: ToggleStateContent;
+        /** UI (icon/text) to render when toggle is OFF */
+        off?: ToggleStateContent;
+    };
 }