pixel-react 1.6.6 → 1.6.8

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,132 +1,132 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Toggle from './Toggle';
-
-const meta: Meta<typeof Toggle> = {
-  title: 'Components/Toggle',
-  component: Toggle,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    onChange: { action: 'changed' },
-    disabled: { control: 'boolean' },
-    checked: { control: 'boolean' },
-    id: { control: 'text' },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    checked: false,
-    id: 'toggle1',
-    size: 'large',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-    id: 'toggle2',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    ...Default.args,
-    checked: true,
-    id: 'toggle3',
-  },
-};
-
-export const SmallSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle4"
-        size="small"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const MediumSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle5"
-        size="medium"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const DynamicIconAndSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle7"
-        size="large"
-        checked={checked}
-        onChange={handleChange}
-        icon={{
-          checked: { name: 'moon_stars_icon', width: 14, height: 14 },
-          unchecked: { name: 'sun_icon', width: 14, height: 14 },
-        }}
-      />
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle8"
-        size="large"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Toggle from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    onChange: { action: 'changed' },
+    disabled: { control: 'boolean' },
+    checked: { control: 'boolean' },
+    id: { control: 'text' },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    checked: false,
+    id: 'toggle1',
+    size: 'large',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    id: 'toggle2',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    ...Default.args,
+    checked: true,
+    id: 'toggle3',
+  },
+};
+
+export const SmallSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle4"
+        size="small"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const MediumSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle5"
+        size="medium"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const DynamicIconAndSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle7"
+        size="large"
+        checked={checked}
+        onChange={handleChange}
+        icon={{
+          checked: { name: 'moon_stars_icon', width: 14, height: 14 },
+          unchecked: { name: 'sun_icon', width: 14, height: 14 },
+        }}
+      />
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle8"
+        size="large"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};

package/src/components/Toggle/Toggle.tsx

@@ -1,96 +1,96 @@
-import React from 'react';
-import classNames from 'classnames';
-import { ToggleProps } from './types';
-import './Toggle.scss';
-import Icon from '../Icon';
-
-const Toggle: React.FC<ToggleProps> = ({
-  onChange,
-  variant = 'primary',
-  disabled,
-  checked = false,
-  id = 'toggle',
-  size = 'large',
-  icon,
-}) => {
-  const handleChange = (e: any) => {
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  const baseIconSizes = {
-    large: 10,
-    medium: 8,
-    small: 6,
-  };
-
-  const defaultIconSize = baseIconSizes[size as 'small' | 'medium' | 'large'];
-
-  const defaultIcons = {
-    checked: {
-      name: 'check_mark',
-      width: defaultIconSize,
-      height: defaultIconSize,
-    },
-    unchecked: {
-      name: 'wrong_mark',
-      width: defaultIconSize,
-      height: defaultIconSize,
-    },
-  };
-
-  const iconNames = {
-    checked: { ...defaultIcons.checked, ...icon?.checked },
-    unchecked: { ...defaultIcons.unchecked, ...icon?.unchecked },
-  };
-
-  return (
-    <div className="ff--switch-container">
-      <input
-        className="ff--switch-checkbox"
-        id={`ff-toggle-${id}`}
-        type="checkbox"
-        disabled={!!disabled}
-        onChange={handleChange}
-        checked={checked}
-      />
-      <label
-        className={classNames(
-          `ff--switch-label default--${size} ff--switch-label--${variant}`,
-          {
-            'ff--switch-label--disabled': disabled,
-          }
-        )}
-        htmlFor={`ff-toggle-${id}`}
-      >
-        <span
-          className={classNames(
-            `ff--switch-button ff--switch-button--${size}`,
-            {
-              checked: checked,
-            }
-          )}
-        >
-          {checked ? (
-            <Icon
-              name={iconNames.checked.name}
-              width={iconNames.checked.width}
-              height={iconNames.checked.height}
-              className={`ff-checked-icon--${variant}`}
-            />
-          ) : (
-            <Icon
-              name={iconNames.unchecked.name}
-              width={iconNames.unchecked.width}
-              height={iconNames.unchecked.height}
-              className={`ff-unchecked-icon--${variant}`}
-            />
-          )}
-        </span>
-      </label>
-    </div>
-  );
-};
-
-export default Toggle;
+import React from 'react';
+import classNames from 'classnames';
+import { ToggleProps } from './types';
+import './Toggle.scss';
+import Icon from '../Icon';
+
+const Toggle: React.FC<ToggleProps> = ({
+  onChange,
+  variant = 'primary',
+  disabled,
+  checked = false,
+  id = 'toggle',
+  size = 'large',
+  icon,
+}) => {
+  const handleChange = (e: any) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const baseIconSizes = {
+    large: 10,
+    medium: 8,
+    small: 6,
+  };
+
+  const defaultIconSize = baseIconSizes[size as 'small' | 'medium' | 'large'];
+
+  const defaultIcons = {
+    checked: {
+      name: 'check_mark',
+      width: defaultIconSize,
+      height: defaultIconSize,
+    },
+    unchecked: {
+      name: 'wrong_mark',
+      width: defaultIconSize,
+      height: defaultIconSize,
+    },
+  };
+
+  const iconNames = {
+    checked: { ...defaultIcons.checked, ...icon?.checked },
+    unchecked: { ...defaultIcons.unchecked, ...icon?.unchecked },
+  };
+
+  return (
+    <div className="ff--switch-container">
+      <input
+        className="ff--switch-checkbox"
+        id={`ff-toggle-${id}`}
+        type="checkbox"
+        disabled={!!disabled}
+        onChange={handleChange}
+        checked={checked}
+      />
+      <label
+        className={classNames(
+          `ff--switch-label default--${size} ff--switch-label--${variant}`,
+          {
+            'ff--switch-label--disabled': disabled,
+          }
+        )}
+        htmlFor={`ff-toggle-${id}`}
+      >
+        <span
+          className={classNames(
+            `ff--switch-button ff--switch-button--${size}`,
+            {
+              checked: checked,
+            }
+          )}
+        >
+          {checked ? (
+            <Icon
+              name={iconNames.checked.name}
+              width={iconNames.checked.width}
+              height={iconNames.checked.height}
+              className={`ff-checked-icon--${variant}`}
+            />
+          ) : (
+            <Icon
+              name={iconNames.unchecked.name}
+              width={iconNames.unchecked.width}
+              height={iconNames.unchecked.height}
+              className={`ff-unchecked-icon--${variant}`}
+            />
+          )}
+        </span>
+      </label>
+    </div>
+  );
+};
+
+export default Toggle;

package/src/components/Toggle/index.ts

@@ -1 +1 @@
-export { default } from './Toggle';
+export { default } from './Toggle';

package/src/components/Toggle/types.ts

@@ -1,43 +1,43 @@
-export interface ToggleProps {
-  /**
-   * Optional onChange handler
-   */
-  onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
-  /**
-   * Optional disabled state
-   */
-  disabled?: boolean;
-  /**
-   * Optional checked state
-   */
-  checked?: boolean;
-  /**
-   * Optional id
-   */
-  id?: string;
-  /**
-   * What background color to occur upon toggled
-   */
-  variant?: 'primary' | 'secondary';
-
-  /**
-   * Defines the size of the toggle
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Optional icon configuration for the toggle. This allows for custom icons to be used for both the checked and unchecked states.
-   *
-   * @property checked - Icon configuration for the checked state.
-   * @property unchecked - Icon configuration for the unchecked state.
-   *
-   * @example
-   * {
-   *   checked: { name: 'checked-icon', width: 24, height: 24 },
-   *   unchecked: { name: 'unchecked-icon', width: 24, height: 24 }
-   * }
-   */
-  icon?: {
-    checked?: { name: string; width: number; height: number };
-    unchecked?: { name: string; width: number; height: number };
-  };
-}
+export interface ToggleProps {
+  /**
+   * Optional onChange handler
+   */
+  onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+  /**
+   * Optional disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Optional checked state
+   */
+  checked?: boolean;
+  /**
+   * Optional id
+   */
+  id?: string;
+  /**
+   * What background color to occur upon toggled
+   */
+  variant?: 'primary' | 'secondary';
+
+  /**
+   * Defines the size of the toggle
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Optional icon configuration for the toggle. This allows for custom icons to be used for both the checked and unchecked states.
+   *
+   * @property checked - Icon configuration for the checked state.
+   * @property unchecked - Icon configuration for the unchecked state.
+   *
+   * @example
+   * {
+   *   checked: { name: 'checked-icon', width: 24, height: 24 },
+   *   unchecked: { name: 'unchecked-icon', width: 24, height: 24 }
+   * }
+   */
+  icon?: {
+    checked?: { name: string; width: number; height: number };
+    unchecked?: { name: string; width: number; height: number };
+  };
+}

package/src/components/ToggleSwitch/ToggleSwitch.scss

@@ -1,59 +1,59 @@
-/* Container Styling */
-.toggle-container {
-    display: flex;
-    background-color: var(--base-bg-color);
-    height: 24px;
-    border-radius: 6px;
-    padding: 4px 2px;
-    overflow: hidden;
-    width: fit-content;
-    box-shadow: 1px 1px 2px 0px var(--base-bg-color),
-    inset -1px -1px 2px var(--base-bg-color),
-    inset 1px -1px 2px var(--ff-toggle-switch-shadow-color),
-    inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-  }
-  
-  /* Button Styling */
-  .toggle-button {
-    padding: 4px 2px;
-    font-size: 10px;
-    font-weight: 500;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    background-color: var(--base-bg-color);
-    color: var(--ff-toggle-switch-off-color);
-    outline: none;
-    transition: all 0.3s ease;
-    min-width: 24px;
-    height: 20px;
-    text-align: center;
-    box-shadow: 
-    inset 1px 1px 2px 0 var(--base-bg-color),
-    1px 1px 3px 0 var(--ff-chips-blur-color),
-    -1px -1px 2px 0 var(--base-bg-color),
-    1px -1px 2px 0 var(--ff-chips-blur-color),
-    -1px 1px 2px 0 var(--ff-chips-blur-color)
-  }
-  
-  /* Active Button */
-  .toggle-button.active {
-    background-color: var(--ff-line-number-bg);
-    color: var(--base-bg-color);
-    box-shadow: 
-    inset -1px -1px 2px 0 var(--ff-chips-blur-color),
-    1px 1px 3px 0 var(--ff-chips-blur-color),
-    -1px -1px 2px 0 var(--base-bg-color),
-    -1px 1px 2px 0 var(--ff-chips-blur-color);
-  }
-  
-  /* Button Hover Effect */
-  .toggle-button:hover {
-    background-color: var(--hover-color);
-    color: var(--brand-color);
-  }
-  
+/* Container Styling */
+.toggle-container {
+    display: flex;
+    background-color: var(--base-bg-color);
+    height: 24px;
+    border-radius: 6px;
+    padding: 4px 2px;
+    overflow: hidden;
+    width: fit-content;
+    box-shadow: 1px 1px 2px 0px var(--base-bg-color),
+    inset -1px -1px 2px var(--base-bg-color),
+    inset 1px -1px 2px var(--ff-toggle-switch-shadow-color),
+    inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  
+  /* Button Styling */
+  .toggle-button {
+    padding: 4px 2px;
+    font-size: 10px;
+    font-weight: 500;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: var(--base-bg-color);
+    color: var(--ff-toggle-switch-off-color);
+    outline: none;
+    transition: all 0.3s ease;
+    min-width: 24px;
+    height: 20px;
+    text-align: center;
+    box-shadow: 
+    inset 1px 1px 2px 0 var(--base-bg-color),
+    1px 1px 3px 0 var(--ff-chips-blur-color),
+    -1px -1px 2px 0 var(--base-bg-color),
+    1px -1px 2px 0 var(--ff-chips-blur-color),
+    -1px 1px 2px 0 var(--ff-chips-blur-color)
+  }
+  
+  /* Active Button */
+  .toggle-button.active {
+    background-color: var(--ff-line-number-bg);
+    color: var(--base-bg-color);
+    box-shadow: 
+    inset -1px -1px 2px 0 var(--ff-chips-blur-color),
+    1px 1px 3px 0 var(--ff-chips-blur-color),
+    -1px -1px 2px 0 var(--base-bg-color),
+    -1px 1px 2px 0 var(--ff-chips-blur-color);
+  }
+  
+  /* Button Hover Effect */
+  .toggle-button:hover {
+    background-color: var(--hover-color);
+    color: var(--brand-color);
+  }
+