@okshaun/components 0.4.5 → 0.4.6

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { CardVariantProps } from '../../../styled-system/recipes';
 import { ChangeEventHandler } from 'react';
 import { CheckboxInputVariantProps } from '../../../styled-system/recipes';
 import { CheckboxVariantProps } from '../../../styled-system/recipes';
+import { ChipVariantProps } from '../../../styled-system/recipes';
 import { CodeVariantProps } from '../../../styled-system/recipes';
 import { ColorToken } from '../../../styled-system/tokens';
 import { ComponentPropsWithoutRef } from 'react';
@@ -224,6 +225,13 @@ export declare type CheckboxProps = {
     error?: boolean;
 } & Omit<BoxProps, 'checked' | 'onChange' | keyof CheckboxVariantProps> & CheckboxVariantProps;
 
+export declare const Chip: React.FC<ChipProps>;
+
+export declare type ChipProps = BoxProps & ChipVariantProps & {
+    children: string | ReactNode;
+    iconName?: IconNamesList;
+};
+
 export declare const Code: React.FC<CodeProps>;
 
 export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps | keyof TextProps> & CodeVariantProps & TextProps & {

package/dist/index.js

@@ -560,6 +560,362 @@ const checkboxInput = /* @__PURE__ */ Object.assign(memo(checkboxInputFn.recipeF
   },
   getVariantProps: checkboxInputFn.getVariantProps
 });
+const chipFn = /* @__PURE__ */ createRecipe("chip", {
+  "state": "resolved",
+  "hue": "blue",
+  "hasIcon": false
+}, [
+  {
+    "hue": "blue",
+    "state": "resolved",
+    "css": {
+      "color": {
+        "base": "blue.70",
+        "_dark": "blue.20"
+      },
+      "bg": {
+        "base": "blue.20",
+        "_dark": "blue.90"
+      },
+      "_hover": {
+        "bg": {
+          "base": "blue.30",
+          "_dark": "blue.80"
+        }
+      }
+    }
+  },
+  {
+    "hue": "blue",
+    "state": "placeholder",
+    "css": {
+      "color": {
+        "base": "blue.50",
+        "_dark": "blue.40"
+      },
+      "borderColor": {
+        "base": "blue.40",
+        "_dark": "blue.60"
+      },
+      "bg": "transparent",
+      "_hover": {
+        "bg": {
+          "base": "blue.10",
+          "_dark": "blue.90/50"
+        }
+      }
+    }
+  },
+  {
+    "hue": "blue",
+    "state": "loading",
+    "css": {
+      "color": {
+        "base": "blue.50",
+        "_dark": "blue.40"
+      },
+      "bg": {
+        "base": "blue.10",
+        "_dark": "blue.90"
+      }
+    }
+  },
+  {
+    "hue": "blue",
+    "state": "deleted",
+    "css": {
+      "color": {
+        "base": "blue.40",
+        "_dark": "blue.60"
+      },
+      "bg": {
+        "base": "blue.10",
+        "_dark": "blue.90"
+      }
+    }
+  },
+  {
+    "hue": "purple",
+    "state": "resolved",
+    "css": {
+      "color": {
+        "base": "purple.70",
+        "_dark": "purple.20"
+      },
+      "bg": {
+        "base": "purple.20",
+        "_dark": "purple.90"
+      },
+      "_hover": {
+        "bg": {
+          "base": "purple.30",
+          "_dark": "purple.80"
+        }
+      }
+    }
+  },
+  {
+    "hue": "purple",
+    "state": "placeholder",
+    "css": {
+      "color": {
+        "base": "purple.50",
+        "_dark": "purple.40"
+      },
+      "borderColor": {
+        "base": "purple.40",
+        "_dark": "purple.60"
+      },
+      "bg": "transparent",
+      "_hover": {
+        "bg": {
+          "base": "purple.10",
+          "_dark": "purple.90/50"
+        }
+      }
+    }
+  },
+  {
+    "hue": "purple",
+    "state": "loading",
+    "css": {
+      "color": {
+        "base": "purple.50",
+        "_dark": "purple.40"
+      },
+      "bg": {
+        "base": "purple.10",
+        "_dark": "purple.90"
+      }
+    }
+  },
+  {
+    "hue": "purple",
+    "state": "deleted",
+    "css": {
+      "color": {
+        "base": "purple.40",
+        "_dark": "purple.60"
+      },
+      "bg": {
+        "base": "purple.10",
+        "_dark": "purple.90"
+      }
+    }
+  },
+  {
+    "hue": "orange",
+    "state": "resolved",
+    "css": {
+      "color": {
+        "base": "orange.70",
+        "_dark": "orange.20"
+      },
+      "bg": {
+        "base": "orange.20",
+        "_dark": "orange.100"
+      },
+      "_hover": {
+        "bg": {
+          "base": "orange.30",
+          "_dark": "orange.90"
+        }
+      }
+    }
+  },
+  {
+    "hue": "orange",
+    "state": "placeholder",
+    "css": {
+      "color": {
+        "base": "orange.50",
+        "_dark": "orange.40"
+      },
+      "borderColor": {
+        "base": "orange.40",
+        "_dark": "orange.60"
+      },
+      "bg": "transparent",
+      "_hover": {
+        "bg": {
+          "base": "orange.10",
+          "_dark": "orange.90/50"
+        }
+      }
+    }
+  },
+  {
+    "hue": "orange",
+    "state": "loading",
+    "css": {
+      "color": {
+        "base": "orange.50",
+        "_dark": "orange.40"
+      },
+      "bg": {
+        "base": "orange.10",
+        "_dark": "orange.100"
+      }
+    }
+  },
+  {
+    "hue": "orange",
+    "state": "deleted",
+    "css": {
+      "color": {
+        "base": "orange.40",
+        "_dark": "orange.60"
+      },
+      "bg": {
+        "base": "orange.10",
+        "_dark": "orange.100"
+      }
+    }
+  },
+  {
+    "hue": "green",
+    "state": "resolved",
+    "css": {
+      "color": {
+        "base": "green.70",
+        "_dark": "green.20"
+      },
+      "bg": {
+        "base": "green.20",
+        "_dark": "green.90"
+      },
+      "_hover": {
+        "bg": {
+          "base": "green.30",
+          "_dark": "green.80"
+        }
+      }
+    }
+  },
+  {
+    "hue": "green",
+    "state": "placeholder",
+    "css": {
+      "color": {
+        "base": "green.50",
+        "_dark": "green.40"
+      },
+      "borderColor": {
+        "base": "green.40",
+        "_dark": "green.60"
+      },
+      "bg": "transparent",
+      "_hover": {
+        "bg": {
+          "base": "green.10",
+          "_dark": "green.90/50"
+        }
+      }
+    }
+  },
+  {
+    "hue": "green",
+    "state": "loading",
+    "css": {
+      "color": {
+        "base": "green.50",
+        "_dark": "green.40"
+      },
+      "bg": {
+        "base": "green.10",
+        "_dark": "green.90"
+      }
+    }
+  },
+  {
+    "hue": "green",
+    "state": "deleted",
+    "css": {
+      "color": {
+        "base": "green.40",
+        "_dark": "green.60"
+      },
+      "bg": {
+        "base": "green.10",
+        "_dark": "green.90"
+      }
+    }
+  },
+  {
+    "hue": "gray",
+    "state": "resolved",
+    "css": {
+      "color": "text.subtle",
+      "bg": "bg.neutral",
+      "_hover": {
+        "bg": "bg.neutral.hovered"
+      }
+    }
+  },
+  {
+    "hue": "gray",
+    "state": "placeholder",
+    "css": {
+      "color": "text.subtlest",
+      "borderColor": "border.default",
+      "bg": "transparent",
+      "_hover": {
+        "bg": "bg.neutral"
+      }
+    }
+  },
+  {
+    "hue": "gray",
+    "state": "loading",
+    "css": {
+      "color": "text.subtlest",
+      "bg": "bg.neutral"
+    }
+  },
+  {
+    "hue": "gray",
+    "state": "deleted",
+    "css": {
+      "color": "text.disabled",
+      "bg": "bg.neutral"
+    }
+  }
+]);
+const chipVariantMap = {
+  "state": [
+    "resolved",
+    "placeholder",
+    "loading",
+    "deleted"
+  ],
+  "hue": [
+    "blue",
+    "purple",
+    "orange",
+    "green",
+    "gray"
+  ],
+  "hasIcon": [
+    "true",
+    "false"
+  ]
+};
+const chipVariantKeys = Object.keys(chipVariantMap);
+const chip = /* @__PURE__ */ Object.assign(memo(chipFn.recipeFn), {
+  __recipe__: true,
+  __name__: "chip",
+  __getCompoundVariantCss__: chipFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: chipVariantKeys,
+  variantMap: chipVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, chipVariantKeys);
+  },
+  getVariantProps: chipFn.getVariantProps
+});
 const codeFn = /* @__PURE__ */ createRecipe("code", {}, []);
 const codeVariantMap = {};
 const codeVariantKeys = Object.keys(codeVariantMap);
@@ -3073,6 +3429,33 @@ const Tag = ({
     }
   );
 };
+const Chip = ({
+  state = "resolved",
+  hue = "blue",
+  children,
+  iconName,
+  onClick,
+  ...props
+}) => {
+  const [className, otherProps] = splitProps(props);
+  const hasIcon = !!iconName;
+  const isClickable = state === "resolved" || state === "placeholder";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "span",
+      className: cx(chip({ state, hue, hasIcon }), className),
+      onClick: isClickable ? onClick : void 0,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      ...otherProps,
+      children: [
+        iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, width: 14, height: 14 }),
+        children
+      ]
+    }
+  );
+};
 function hasWindow() {
   return typeof window !== "undefined";
 }
@@ -8384,6 +8767,7 @@ export {
   Card,
   Checkbox,
   CheckboxInput,
+  Chip,
   Code,
   Divider,
   Dropdown,