@beydesign/storybook 0.0.8 → 0.0.10

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export { Avatar } from './stories/Avatar';
 export { Typography } from './stories/Typography';
 export { Badge } from './stories/Bagde';
 export { Checkbox } from './stories/Checkbox';
+export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';
 export { BadgeColor, BadgeSize, type BadgeProps } from './stories/types/badge';
 export { AvatarStyle, AvatarSize, type AvatarProps, } from './stories/types/avatar';
 export { TypographySize, TypographyWeight, type TypographyProps, } from './stories/types/typography';
 export { CheckboxType, type CheckboxProps } from './stories/types/checkbox';
+export { ToggleButtonGroupSize, type ToggleButtonGroupProps, } from './stories/types/toggle-button-group';

package/dist/index.js

@@ -4,9 +4,11 @@ export { Avatar } from './stories/Avatar';
 export { Typography } from './stories/Typography';
 export { Badge } from './stories/Bagde';
 export { Checkbox } from './stories/Checkbox';
+export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
 // Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
 export { BadgeColor, BadgeSize } from './stories/types/badge';
 export { AvatarStyle, AvatarSize, } from './stories/types/avatar';
 export { TypographySize, TypographyWeight, } from './stories/types/typography';
 export { CheckboxType } from './stories/types/checkbox';
+export { ToggleButtonGroupSize, } from './stories/types/toggle-button-group';

package/dist/stories/ToggleButtonGroup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentsProps, ToggleButtonGroupProps } from './types/toggle-button-group';
+export declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/{ToggleButton.js → ToggleButtonGroup.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToggleButtonSize, } from './types/toggle-button';
+import { ToggleButtonGroupSize, } from './types/toggle-button-group';
 import { Box } from '@mui/material';
 import { MainButton } from './Button';
 import { ButtonHierarchy, ButtonSize, ButtonType, } from './types/button';
-export const ToggleButton = ({ onChange, options, selectedOption, disabled, size = ToggleButtonSize.lg, }) => {
+export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, }) => {
     const selectedOptionStyle = {
         backgroundColor: 'var(--colors-light-background-bg-card-highlight-hover)',
         color: 'var(--colors-light-text-text-accent)',
@@ -13,11 +13,11 @@ export const ToggleButton = ({ onChange, options, selectedOption, disabled, size
     };
     const getButtonSize = () => {
         switch (size) {
-            case ToggleButtonSize.sm:
+            case ToggleButtonGroupSize.sm:
                 return ButtonSize.sm;
-            case ToggleButtonSize.md:
+            case ToggleButtonGroupSize.md:
                 return ButtonSize.md;
-            case ToggleButtonSize.lg:
+            case ToggleButtonGroupSize.lg:
                 return ButtonSize.lg;
             default:
                 return ButtonSize.md;
@@ -33,5 +33,5 @@ export const ToggleButton = ({ onChange, options, selectedOption, disabled, size
         }) }));
 };
 export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle Buttons" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(ToggleButton, { options: ['Option 1', 'Option 2', 'Option 3'], selectedOption: "Option 1", onChange: () => { } }) })] }));
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle Buttons" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(ToggleButtonGroup, { options: ['Option 1', 'Option 2', 'Option 3'], selectedOption: "Option 1", onChange: () => { } }) })] }));
 };

package/dist/stories/{ToggleButton.stories.d.ts → ToggleButtonGroup.stories.d.ts}

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ToggleButton } from './ToggleButton';
-declare const meta: Meta<typeof ToggleButton>;
+import { ToggleButtonGroup } from './ToggleButtonGroup';
+declare const meta: Meta<typeof ToggleButtonGroup>;
 export default meta;
-type Story = StoryObj<typeof ToggleButton>;
+type Story = StoryObj<typeof ToggleButtonGroup>;
 export declare const Default: Story;
 export declare const Size_SM: Story;
 export declare const Size_MD: Story;

package/dist/stories/{ToggleButton.stories.js → ToggleButtonGroup.stories.js}

@@ -1,8 +1,8 @@
-import { ToggleButton } from './ToggleButton';
-import { ToggleButtonSize } from './types/toggle-button';
+import { ToggleButtonGroup } from './ToggleButtonGroup';
+import { ToggleButtonGroupSize } from './types/toggle-button-group';
 const meta = {
-    title: 'Design System/Components/ToggleButton',
-    component: ToggleButton,
+    title: 'Design System/Components/ToggleButtonGroup',
+    component: ToggleButtonGroup,
     parameters: {
         layout: 'centered',
         design: {
@@ -35,11 +35,11 @@ const meta = {
         },
         size: {
             control: 'select',
-            options: Object.values(ToggleButtonSize),
+            options: Object.values(ToggleButtonGroupSize),
             description: 'Size of the toggle button',
             table: {
                 type: { summary: 'string' },
-                defaultValue: { summary: ToggleButtonSize.md },
+                defaultValue: { summary: ToggleButtonGroupSize.md },
             },
         },
     },
@@ -57,7 +57,7 @@ export const Size_SM = {
         options: ['Option 1', 'Option 2', 'Option 3'],
         selectedOption: 'Option 1',
         onChange: () => { },
-        size: ToggleButtonSize.sm,
+        size: ToggleButtonGroupSize.sm,
     },
 };
 export const Size_MD = {
@@ -65,7 +65,7 @@ export const Size_MD = {
         options: ['Option 1', 'Option 2', 'Option 3'],
         selectedOption: 'Option 1',
         onChange: () => { },
-        size: ToggleButtonSize.md,
+        size: ToggleButtonGroupSize.md,
     },
 };
 export const Size_LG = {
@@ -73,6 +73,6 @@ export const Size_LG = {
         options: ['Option 1', 'Option 2', 'Option 3'],
         selectedOption: 'Option 1',
         onChange: () => { },
-        size: ToggleButtonSize.lg,
+        size: ToggleButtonGroupSize.lg,
     },
 };

package/dist/stories/types/{toggle-button.d.ts → toggle-button-group.d.ts}

@@ -1,24 +1,17 @@
 /**
  * Toggle button size variants
  */
-export declare enum ToggleButtonSize {
+export declare enum ToggleButtonGroupSize {
     lg = "lg",
     md = "md",
     sm = "sm"
 }
-/**
- * Toggle button style variants
- */
-export declare enum ToggleButtonStyle {
-    Outline = "Outline",
-    Filled = "Filled"
-}
 /**
  * Toggle button component props
  */
-export type ToggleButtonProps = {
+export type ToggleButtonGroupProps = {
     /** Size variant of the toggle button */
-    size?: ToggleButtonSize;
+    size?: ToggleButtonGroupSize;
     /** Selected option of the toggle button */
     selectedOption: string;
     /** Options of the toggle button */

package/dist/stories/types/toggle-button-group.js

@@ -0,0 +1,9 @@
+/**
+ * Toggle button size variants
+ */
+export var ToggleButtonGroupSize;
+(function (ToggleButtonGroupSize) {
+    ToggleButtonGroupSize["lg"] = "lg";
+    ToggleButtonGroupSize["md"] = "md";
+    ToggleButtonGroupSize["sm"] = "sm";
+})(ToggleButtonGroupSize || (ToggleButtonGroupSize = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/stories/ToggleButton.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ComponentsProps, ToggleButtonProps } from './types/toggle-button';
-export declare const ToggleButton: React.FC<ToggleButtonProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/types/toggle-button.js

@@ -1,17 +0,0 @@
-/**
- * Toggle button size variants
- */
-export var ToggleButtonSize;
-(function (ToggleButtonSize) {
-    ToggleButtonSize["lg"] = "lg";
-    ToggleButtonSize["md"] = "md";
-    ToggleButtonSize["sm"] = "sm";
-})(ToggleButtonSize || (ToggleButtonSize = {}));
-/**
- * Toggle button style variants
- */
-export var ToggleButtonStyle;
-(function (ToggleButtonStyle) {
-    ToggleButtonStyle["Outline"] = "Outline";
-    ToggleButtonStyle["Filled"] = "Filled";
-})(ToggleButtonStyle || (ToggleButtonStyle = {}));