(#0) npm publish (0.0.183)

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bbodek-ui",
- "version": "0.0.181",
+ "version": "0.0.183",
  "type": "module",
  "author": "Bbodek",
  "license": "MIT",

src/core/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta } from "@storybook/react";
+
+import Toggle from "../Toggle/index";
+import { ToggleButtonProps } from "./types";
+
+const meta = {
+ title: "core/Toggle",
+ component: Toggle,
+ tags: ["autodocs"],
+ argTypes: {
+ label: {
+ control: "text",
+ description: "Toggle Label",
+ },
+ className: {
+ control: "text",
+ description: "Toggle ClassName",
+ },
+ checked: {
+ control: "boolean",
+ description: "Toggle Checked",
+ },
+ reverse: {
+ control: "boolean",
+ description: "Toggle Reverse",
+ },
+ },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+export const Default = (props: ToggleButtonProps) => {
+ const { label, ...rest } = props;
+
+ return <Toggle label = {label || "토글"} {...rest}/>;
+};

src/core/components/Toggle/index.tsx

@@ -0,0 +1,41 @@
+import clsx from "clsx";
+import { useId } from "react";
+
+import Typography from "../Typography";
+import { ToggleButtonProps } from "./types";
+
+const ToggleButton = ({
+ label,
+ className,
+ onChange,
+ checked,
+ reverse = false,
+}: ToggleButtonProps) => {
+ const id = useId();
+
+ return (
+ <div
+ className = {clsx(
+ "flex items-center gap-x-1",
+ reverse && "flex-row-reverse",
+ className,
+ )}
+ >
+ <Typography theme = 'body-02-bold' text = {label} />
+ <label htmlFor = {id}>
+ <input
+ id = {id}
+ type = 'checkbox'
+ className = 'peer hidden'
+ checked = {checked}
+ onChange = {onChange}
+ />
+ <div className = 'relative h-[2rem] w-[3.5rem] cursor-pointer rounded-full bg-gray-03 transition-all peer-checked:bg-primary-03 peer-checked:[&>.circle]:-left-[0.125rem] peer-checked:[&>.circle]:translate-x-full'>
+ <div className = 'circle absolute left-[0.125rem] top-1/2 h-[1.75rem] w-[1.75rem] -translate-y-1/2 translate-x-0 transform rounded-full border border-solid border-gray-03 bg-white transition-all' />
+ </div>
+ </label>
+ </div>
+ );
+};
+
+export default ToggleButton;

src/core/components/Toggle/types/index.ts

@@ -0,0 +1,8 @@
+export interface ToggleButtonProps
+ extends Pick<
+ React.InputHTMLAttributes<HTMLInputElement>,
+ "onChange" | "className" | "checked"
+ > {
+ label: string;
+ reverse?: boolean;
+}