feat(switch): initial structure

packages/components/card/package.json

@@ -42,7 +42,6 @@
     "@nextui-org/shared-css": "workspace:*",
     "@nextui-org/dom-utils": "workspace:*",
     "@nextui-org/drip": "workspace:*",
-    "@nextui-org/image": "workspace:*",
     "@react-aria/focus": "^3.11.0",
     "@react-aria/utils": "^3.15.0",
     "@react-aria/interactions": "^3.14.0"

packages/components/switch/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/switch
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/switch
+# or
+npm i @nextui-org/switch
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/components/switch/__tests__/switch.test.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Switch} from "../src";
+
+describe("Switch", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Switch />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(<Switch ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});

packages/components/switch/clean-package.config.json

@@ -0,0 +1,11 @@
+{
+  "replace": {
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
+      "./package.json": "./package.json"
+    }
+  }
+}

packages/components/switch/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@nextui-org/switch",
+  "version": "2.0.0-beta.1",
+  "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
+  "keywords": [
+    "switch"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/switch"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "yarn build:fast -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/dom-utils": "workspace:*"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/components/switch/src/index.ts

@@ -0,0 +1,10 @@
+import Switch from "./switch";
+
+// export types
+export type {SwitchProps} from "./switch";
+
+// export hooks
+export {useSwitch} from "./use-switch";
+
+// export component
+export {Switch};

packages/components/switch/src/switch.tsx

@@ -0,0 +1,22 @@
+import {forwardRef} from "@nextui-org/system";
+import {__DEV__} from "@nextui-org/shared-utils";
+
+import {UseSwitchProps, useSwitch} from "./use-switch";
+
+export interface SwitchProps extends Omit<UseSwitchProps, "ref"> {}
+
+const Switch = forwardRef<SwitchProps, "div">((props, ref) => {
+  const {Component, domRef, children, styles, ...otherProps} = useSwitch({ref, ...props});
+
+  return (
+    <Component ref={domRef} className={styles} {...otherProps}>
+      {children}
+    </Component>
+  );
+});
+
+if (__DEV__) {
+  Switch.displayName = "NextUI.Switch";
+}
+
+export default Switch;

packages/components/switch/src/use-switch.ts

@@ -0,0 +1,37 @@
+import type {ToggleVariantProps} from "@nextui-org/theme";
+
+import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
+import {toggle} from "@nextui-org/theme";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {ReactRef} from "@nextui-org/shared-utils";
+import {useMemo} from "react";
+
+export interface UseSwitchProps extends HTMLNextUIProps<"div">, ToggleVariantProps {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+}
+
+export function useSwitch(originalProps: UseSwitchProps) {
+  const [props, variantProps] = mapPropsVariants(originalProps, toggle.variantKeys);
+
+  const {ref, as, className, ...otherProps} = props;
+
+  const Component = as || "div";
+
+  const domRef = useDOMRef(ref);
+
+  const styles = useMemo(
+    () =>
+      toggle({
+        ...variantProps,
+        className,
+      }),
+    [...Object.values(variantProps), className],
+  );
+
+  return {Component, styles, domRef, ...otherProps};
+}
+
+export type UseSwitchReturn = ReturnType<typeof useSwitch>;

packages/components/switch/stories/switch.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {toggle} from "@nextui-org/theme";
+
+import {Switch, SwitchProps} from "../src";
+
+export default {
+  title: "Switch",
+  component: Switch,
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+        options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
+      },
+    },
+    radius: {
+      control: {
+        type: "select",
+        options: ["none", "base", "sm", "md", "lg", "xl", "full"],
+      },
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["xs", "sm", "md", "lg", "xl"],
+      },
+    },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as ComponentMeta<typeof Switch>;
+
+const defaultProps = {
+  ...toggle.defaultVariants,
+};
+
+const Template: ComponentStory<typeof Switch> = (args: SwitchProps) => <Switch {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
+};

packages/components/switch/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    }
+  },
+  "include": ["src", "index.ts"]
+}

packages/core/react/package.json

@@ -48,7 +48,6 @@
     "@nextui-org/checkbox": "workspace:*",
     "@nextui-org/code": "workspace:*",
     "@nextui-org/drip": "workspace:*",
-    "@nextui-org/image": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "@nextui-org/spinner": "workspace:*",
     "@nextui-org/pagination": "workspace:*",

packages/core/theme/src/components/index.ts

@@ -16,3 +16,4 @@ export * from "./checkbox-group";
 export * from "./radio";
 export * from "./radio-group";
 export * from "./pagination";
+export * from "./toggle";

packages/core/theme/src/components/toggle.ts

@@ -0,0 +1,25 @@
+import {tv, type VariantProps} from "tailwind-variants";
+
+/**
+ * Toggle (Switch) wrapper **Tailwind Variants** component
+ *
+ * const {base, content, dot, avatar, closeButton} = toggle({...})
+ *
+ * @example
+ * <div className={base())}>
+ *    // left content
+ *   <span className={avatar()}/>
+ *   <svg className={dot()}/>
+ *   <span className={content()}>Default</span>
+ *   <svg className={closeButton()}>close button</svg>
+ *    // right content
+ * </div>
+ */
+const toggle = tv({
+  variants: {},
+});
+
+export type ToggleVariantProps = VariantProps<typeof toggle>;
+export type ToggleSlots = keyof ReturnType<typeof toggle>;
+
+export {toggle};

pnpm-lock.yaml

@@ -391,7 +391,6 @@ importers:
       '@nextui-org/code': workspace:*
       '@nextui-org/dom-utils': workspace:*
       '@nextui-org/drip': workspace:*
-      '@nextui-org/image': workspace:*
       '@nextui-org/link': workspace:*
       '@nextui-org/shared-css': workspace:*
       '@nextui-org/shared-utils': workspace:*
@@ -405,7 +404,6 @@ importers:
     dependencies:
       '@nextui-org/dom-utils': link:../../utilities/dom-utils
       '@nextui-org/drip': link:../drip
-      '@nextui-org/image': link:../image
       '@nextui-org/shared-css': link:../../utilities/shared-css
       '@nextui-org/shared-utils': link:../../utilities/shared-utils
       '@nextui-org/system': link:../../core/system
@@ -558,27 +556,6 @@ importers:
       clean-package: 2.2.0
       react: 18.2.0
 
-  packages/components/image:
-    specifiers:
-      '@nextui-org/dom-utils': workspace:*
-      '@nextui-org/shared-utils': workspace:*
-      '@nextui-org/system': workspace:*
-      '@nextui-org/use-real-shape': workspace:*
-      '@nextui-org/use-ref-state': workspace:*
-      '@nextui-org/use-resize': workspace:*
-      clean-package: 2.2.0
-      react: ^18.2.0
-    dependencies:
-      '@nextui-org/dom-utils': link:../../utilities/dom-utils
-      '@nextui-org/shared-utils': link:../../utilities/shared-utils
-      '@nextui-org/system': link:../../core/system
-      '@nextui-org/use-real-shape': link:../../hooks/use-real-shape
-      '@nextui-org/use-ref-state': link:../../hooks/use-ref-state
-      '@nextui-org/use-resize': link:../../hooks/use-resize
-    devDependencies:
-      clean-package: 2.2.0
-      react: 18.2.0
-
   packages/components/link:
     specifiers:
       '@nextui-org/dom-utils': workspace:*
@@ -706,6 +683,23 @@ importers:
       clean-package: 2.2.0
       react: 18.2.0
 
+  packages/components/switch:
+    specifiers:
+      '@nextui-org/dom-utils': workspace:*
+      '@nextui-org/shared-utils': workspace:*
+      '@nextui-org/system': workspace:*
+      '@nextui-org/theme': workspace:*
+      clean-package: 2.2.0
+      react: ^18.2.0
+    dependencies:
+      '@nextui-org/dom-utils': link:../../utilities/dom-utils
+      '@nextui-org/shared-utils': link:../../utilities/shared-utils
+      '@nextui-org/system': link:../../core/system
+      '@nextui-org/theme': link:../../core/theme
+    devDependencies:
+      clean-package: 2.2.0
+      react: 18.2.0
+
   packages/components/tooltip:
     specifiers:
       '@nextui-org/aria-utils': workspace:*
@@ -777,7 +771,6 @@ importers:
       '@nextui-org/checkbox': workspace:*
       '@nextui-org/code': workspace:*
       '@nextui-org/drip': workspace:*
-      '@nextui-org/image': workspace:*
       '@nextui-org/link': workspace:*
       '@nextui-org/pagination': workspace:*
       '@nextui-org/radio': workspace:*
@@ -796,7 +789,6 @@ importers:
       '@nextui-org/checkbox': link:../../components/checkbox
       '@nextui-org/code': link:../../components/code
       '@nextui-org/drip': link:../../components/drip
-      '@nextui-org/image': link:../../components/image
       '@nextui-org/link': link:../../components/link
       '@nextui-org/pagination': link:../../components/pagination
       '@nextui-org/radio': link:../../components/radio