feat(chip): migration in progress

packages/components/chip/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/chip
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/chip
+# or
+npm i @nextui-org/chip
+```
+
+## 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/chip/__tests__/chip.test.tsx

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

packages/components/chip/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/chip/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@nextui-org/chip",
+  "version": "2.0.0-beta.1",
+  "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
+  "keywords": [
+    "chip"
+  ],
+  "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/chip"
+  },
+  "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": ">=16.8.0"
+  },
+  "dependencies": {
+    "@nextui-org/dom-utils": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*"
+  },
+  "devDependencies": {
+    "@react-types/checkbox": "^3.4.0",
+    "clean-package": "2.1.1",
+    "react": "^17.0.2"
+  },
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/components/chip/src/chip.tsx

@@ -0,0 +1,21 @@
+import {forwardRef} from "@nextui-org/system";
+import {__DEV__} from "@nextui-org/shared-utils";
+
+import {UseChipProps, useChip} from "./use-chip";
+
+export interface ChipProps extends Omit<UseChipProps, "ref"> {}
+
+const Chip = forwardRef<ChipProps, "div">((props, ref) => {
+  const {Component, children, getChipProps} = useChip({
+    ref,
+    ...props,
+  });
+
+  return <Component {...getChipProps()}>{children}</Component>;
+});
+
+if (__DEV__) {
+  Chip.displayName = "NextUI.Chip";
+}
+
+export default Chip;

packages/components/chip/src/index.ts

@@ -0,0 +1,10 @@
+import Chip from "./chip";
+
+// export types
+export type {ChipProps} from "./chip";
+
+// export hooks
+export {useChip} from "./use-chip";
+
+// export component
+export {Chip};

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

@@ -0,0 +1,57 @@
+import type {ChipVariantProps} from "@nextui-org/theme";
+
+import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
+import {chip} from "@nextui-org/theme";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {ReactRef} from "@nextui-org/shared-utils";
+import {useMemo} from "react";
+
+export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLDivElement | null>;
+  /**
+   * Element to be rendered in the left side of the chip.
+   */
+  leftContent?: React.ReactNode;
+  /**
+   * Element to be rendered in the right side of the chip.
+   */
+  rightContent?: React.ReactNode;
+}
+
+export function useChip(originalProps: UseChipProps) {
+  const [props, variantProps] = mapPropsVariants(originalProps, chip.variantKeys);
+
+  const {ref, as, children, className, ...otherProps} = props;
+
+  const Component = as || "div";
+
+  const domRef = useDOMRef(ref);
+
+  const styles = useMemo(
+    () =>
+      chip({
+        ...variantProps,
+        className,
+      }),
+    [...Object.values(variantProps), className],
+  );
+
+  const getChipProps = () => {
+    return {
+      ref: domRef,
+      className: styles,
+      ...otherProps,
+    };
+  };
+
+  return {
+    Component,
+    children,
+    getChipProps,
+  };
+}
+
+export type UseChipReturn = ReturnType<typeof useChip>;

packages/components/chip/stories/chip.stories.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {chip} from "@nextui-org/theme";
+
+import {Chip, ChipProps} from "../src";
+
+export default {
+  title: "Display/Chip",
+  component: Chip,
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "bordered", "light", "flat", "shadow"],
+      },
+    },
+    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"],
+      },
+    },
+    fullWidth: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as ComponentMeta<typeof Chip>;
+
+const defaultProps = {
+  ...chip.defaultVariants,
+  children: "Chip",
+};
+
+const Template: ComponentStory<typeof Chip> = (args: ChipProps) => <Chip {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
+};

packages/components/chip/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@stitches/react": ["../../../node_modules/@stitches/react"]
+    }
+  },
+  "include": ["src", "index.ts"]
+}

packages/components/storybook/.storybook/main.js

@@ -8,6 +8,7 @@ module.exports = {
     "../../code/stories/*.stories.@(js|jsx|ts|tsx)",
     "../../tooltip/stories/*.stories.@(js|jsx|ts|tsx)",
     "../../snippet/stories/*.stories.@(js|jsx|ts|tsx)",
+    "../../chip/stories/*.stories.@(js|jsx|ts|tsx)",
   ],
   staticDirs: ["../public"],
   addons: [

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

@@ -0,0 +1,208 @@
+import {tv, type VariantProps} from "tailwind-variants";
+
+/**
+ * Chip wrapper **Tailwind Variants** component
+ *
+ * const styles = chip({...})
+ *
+ * @example
+ * <div className={styles)}>
+ *   Default
+ * </div>
+ */
+const chip = tv({
+  base: [
+    "relative",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "box-border",
+    "font-medium",
+    "select-none",
+    "gap-3",
+  ],
+  variants: {
+    variant: {
+      solid: "",
+      bordered: "border-2 !bg-transparent",
+      light: "!bg-transparent",
+      flat: "",
+      shadow: "",
+    },
+    color: {
+      neutral: [
+        "bg-neutral-300",
+        "dark:bg-neutral-700",
+        "text-neutral-800",
+        "dark:text-neutral-100",
+      ],
+      primary: ["bg-primary", "text-white", "data-[status=checked]:bg-primary-600"],
+      secondary: ["bg-secondary", "text-white", "data-[status=checked]:bg-secondary-600"],
+      success: ["bg-success", "text-success-800", "data-[status=checked]:bg-success-600"],
+      warning: ["bg-warning", "text-warning-800", "data-[status=checked]:bg-warning-600"],
+      danger: ["bg-danger", "text-white", "data-[status=checked]:bg-danger-600"],
+    },
+    size: {
+      xs: "px-1 h-5 text-xs",
+      sm: "px-2 h-6 text-sm",
+      md: "px-3 h-7 text-base",
+      lg: "px-4 h-8 text-lg",
+      xl: "px-5 h-9 text-xl",
+    },
+    radius: {
+      none: "rounded-none",
+      base: "rounded",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      "2xl": "rounded-2xl",
+      "3xl": "rounded-3xl",
+      full: "rounded-full",
+    },
+    isDisabled: {
+      true: "opacity-50 pointer-events-none",
+    },
+    fullWidth: {
+      true: "w-full",
+    },
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "neutral",
+    size: "md",
+    radius: "full",
+    fullWidth: false,
+    isDisabled: false,
+  },
+  compoundVariants: [
+    // shadow / color
+    {
+      variant: "shadow",
+      color: "neutral",
+      class: "shadow-lg shadow-neutral/40",
+    },
+    {
+      variant: "shadow",
+      color: "primary",
+      class: "shadow-lg shadow-primary/40",
+    },
+    {
+      variant: "shadow",
+      color: "secondary",
+      class: "shadow-lg shadow-secondary/40",
+    },
+    {
+      variant: "shadow",
+      color: "success",
+      class: "shadow-lg shadow-success/40",
+    },
+    {
+      variant: "shadow",
+      color: "warning",
+      class: "shadow-lg shadow-warning/40",
+    },
+    {
+      variant: "shadow",
+      color: "danger",
+      class: "shadow-lg shadow-danger/40",
+    },
+    // bordered / color
+    {
+      variant: "bordered",
+      color: "neutral",
+      class: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-100",
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: "border-primary text-primary",
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: "border-secondary text-secondary",
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: "border-success text-success",
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: "border-warning text-warning",
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: "border-danger text-danger",
+    },
+    // flat / color
+    {
+      variant: "flat",
+      color: "neutral",
+      class: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-100",
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: "bg-primary-50 dark:bg-primary-900 text-primary",
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: "bg-danger-50 dark:bg-danger-900 text-danger dark:text-danger-400",
+    },
+    // light / color
+    {
+      variant: "light",
+      color: "neutral",
+      class: "text-neutral-700 dark:text-neutral-100",
+    },
+    {
+      variant: "light",
+      color: "primary",
+      class: "text-primary",
+    },
+    {
+      variant: "light",
+      color: "secondary",
+      class: "text-secondary",
+    },
+    {
+      variant: "light",
+      color: "success",
+      class: "text-success",
+    },
+    {
+      variant: "light",
+      color: "warning",
+      class: "text-warning",
+    },
+    {
+      variant: "light",
+      color: "danger",
+      class: "text-danger",
+    },
+  ],
+});
+
+export type ChipVariantProps = VariantProps<typeof chip>;
+
+export {chip};

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

@@ -9,3 +9,4 @@ export * from "./spinner";
 export * from "./code";
 export * from "./tooltip";
 export * from "./snippet";
+export * from "./chip";

pnpm-lock.yaml

@@ -482,6 +482,25 @@ importers:
       clean-package: 2.1.1
       react: 17.0.2
 
+  packages/components/chip:
+    specifiers:
+      '@nextui-org/dom-utils': workspace:*
+      '@nextui-org/shared-utils': workspace:*
+      '@nextui-org/system': workspace:*
+      '@nextui-org/theme': workspace:*
+      '@react-types/checkbox': ^3.4.0
+      clean-package: 2.1.1
+      react: ^17.0.2
+    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:
+      '@react-types/checkbox': 3.4.1_react@17.0.2
+      clean-package: 2.1.1
+      react: 17.0.2
+
   packages/components/code:
     specifiers:
       '@nextui-org/dom-utils': workspace:*