feat(root): gitignore reset

.gitignore

@@ -20,7 +20,7 @@ types
 /build
 dist/
 storybook-static
-/packages/components/storybook/public/tailwind.css
+/packages/storybook/public/tailwind.css
 # misc
 .DS_Store
 .env

packages/components/chip/src/chip.tsx

@@ -13,6 +13,7 @@ const Chip = forwardRef<ChipProps, "div">((props, ref) => {
     children,
     slots,
     styles,
+    variant,
     isCloseable,
     leftContent,
     rightContent,
@@ -23,6 +24,14 @@ const Chip = forwardRef<ChipProps, "div">((props, ref) => {
     ...props,
   });
 
+  const left = useMemo(() => {
+    if (variant === "dot" && !leftContent) {
+      return <span className={slots.dot({class: styles?.dot})} />;
+    }
+
+    return leftContent;
+  }, [leftContent, variant]);
+
   const right = useMemo(() => {
     if (isCloseable) {
       return (
@@ -35,7 +44,7 @@ const Chip = forwardRef<ChipProps, "div">((props, ref) => {
 
   return (
     <Component {...getChipProps()}>
-      {leftContent}
+      {left}
       <label className={slots.label({class: styles?.label})}>{children}</label>
       {right}
     </Component>

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

@@ -31,6 +31,7 @@ export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
    * ```ts
    * <Chip styles={{
    *    base:"base-classes",
+   *    dot: "dot-classes",
    *    label: "label-classes",
    *    closeButton: "close-button-classes",
    * }} />
@@ -60,13 +61,19 @@ export function useChip(originalProps: UseChipProps) {
 
   const {focusProps: closeFocusProps, isFocusVisible: isCloseButtonFocusVisible} = useFocusRing();
 
+  const isOneChar = useMemo(
+    () => typeof children === "string" && children?.length === 1,
+    [children],
+  );
+
   const slots = useMemo(
     () =>
       chip({
         ...variantProps,
+        isOneChar,
         isCloseButtonFocusVisible,
       }),
-    [...Object.values(variantProps), isCloseButtonFocusVisible],
+    [...Object.values(variantProps), isCloseButtonFocusVisible, isOneChar],
   );
 
   const {pressProps: closePressProps} = usePress({
@@ -103,6 +110,7 @@ export function useChip(originalProps: UseChipProps) {
     children,
     slots,
     styles,
+    variant: originalProps.variant,
     leftContent: getContentClone(leftContent),
     rightContent: getContentClone(rightContent),
     isCloseable,

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

@@ -13,7 +13,7 @@ export default {
     variant: {
       control: {
         type: "select",
-        options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
+        options: ["solid", "bordered", "light", "flat", "faded", "shadow", "dot"],
       },
     },
     color: {

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

@@ -28,7 +28,7 @@ const badge = tv({
       "items-center",
       "text-inherit",
       "select-none",
-      "font-medium",
+      "font-regular",
       "scale-100",
       "opacity-100",
       "data-[invisible=true]:scale-0",
@@ -116,7 +116,7 @@ const badge = tv({
         badge: "transition-none",
       },
       false: {
-        badge: "transition-all",
+        badge: "transition-transform-opacity",
       },
     },
     disableOutline: {

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

@@ -5,10 +5,12 @@ import {ringClasses, colorVariants} from "../utils";
 /**
  * Chip wrapper **Tailwind Variants** component
  *
- * const {base, label,closeButton} = chip({...})
+ * const {base, label, dot, closeButton} = chip({...})
  *
  * @example
  * <div className={base())}>
+ *    // left content
+ *   <svg className={dot()}/>
  *   <label className={label()}>Default</label>
  *   <svg className={closeButton()}>close button</svg>
  * </div>
@@ -17,6 +19,7 @@ const chip = tv({
   slots: {
     base: ["relative", "inline-flex", "items-center", "justify-between", "box-border"],
     label: "flex-1 text-inherit select-none font-regular",
+    dot: ["w-2", "h-2", "mr-2", "rounded-full"],
     closeButton: [
       "z-10",
       "apparance-none",
@@ -42,6 +45,7 @@ const chip = tv({
         base: "border-2",
       },
       shadow: {},
+      dot: {},
     },
     color: {
       neutral: {
@@ -101,6 +105,12 @@ const chip = tv({
       "3xl": {base: "rounded-3xl"},
       full: {base: "rounded-full"},
     },
+    isOneChar: {
+      true: {
+        base: "px-0 justify-center",
+        label: "px-0 flex-none",
+      },
+    },
     isDisabled: {
       true: {base: "opacity-50 pointer-events-none"},
     },
@@ -337,6 +347,42 @@ const chip = tv({
         base: colorVariants.light.danger,
       },
     },
+    // isOneChar / size
+    {
+      isOneChar: true,
+      size: "xs",
+      class: {
+        base: "w-4 h-4",
+      },
+    },
+    {
+      isOneChar: true,
+      size: "sm",
+      class: {
+        base: "w-5 h-5",
+      },
+    },
+    {
+      isOneChar: true,
+      size: "md",
+      class: {
+        base: "w-6 h-6",
+      },
+    },
+    {
+      isOneChar: true,
+      size: "lg",
+      class: {
+        base: "w-7 h-7",
+      },
+    },
+    {
+      isOneChar: true,
+      size: "xl",
+      class: {
+        base: "w-8 h-8",
+      },
+    },
   ],
 });
 

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

@@ -58,4 +58,9 @@ export const utilities = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION,
   },
+  ".transition-transform-opacity": {
+    "transition-property": "transform, opacity",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION,
+  },
 };

packages/core/theme/stories/colors.stories.tsx

@@ -90,7 +90,7 @@ const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
 );
 
 export default {
-  title: "Theme/Colors",
+  title: "Foundation/Colors",
   component: SwatchSet,
 } as ComponentMeta<typeof SwatchSet>;