@sarunyu/system-one 1.0.5 → 1.1.1

package/dist/index.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import React__default, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, useLayoutEffect } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { Lock, CalendarBlank, MapPin, Users, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, Check, X, MagnifyingGlass, Circle, Clock } from "@phosphor-icons/react";
+import { Lock, CalendarBlank, MapPin, Users, Check, Plus, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, X, MagnifyingGlass, Circle, Clock } from "@phosphor-icons/react";
 import { DayPicker, useNavigation } from "react-day-picker";
 import * as Popover from "@radix-ui/react-popover";
 import { Drawer as Drawer$1 } from "vaul";
@@ -377,6 +377,68 @@ const Card = forwardRef(function Card2({
   );
 });
 Card.displayName = "Card";
+const sizeStyles$1 = {
+  large: {
+    container: "h-9 px-3 gap-1",
+    text: "text-sm leading-5",
+    icon: "icon-lg"
+  },
+  medium: {
+    container: "h-8 px-3 gap-1",
+    text: "text-sm leading-5",
+    icon: "icon-lg"
+  },
+  small: {
+    container: "h-7 px-2.5 gap-0.5",
+    text: "text-xs leading-4",
+    icon: "icon-md"
+  }
+};
+const multiplePaddingBySize = {
+  large: "pl-[8px] pr-[12px]",
+  medium: "pl-[8px] pr-[12px]",
+  small: "pl-[6px] pr-[10px]"
+};
+const Chip = forwardRef(function Chip2({
+  label = "Chips Text",
+  type = "single",
+  size = "large",
+  selected = false,
+  disabled = false,
+  onClick,
+  className
+}, ref) {
+  const s = sizeStyles$1[size];
+  const isMultiple = type === "multiple";
+  const state = disabled ? selected ? "selected-disabled" : "disabled" : selected ? "selected" : "default";
+  const containerClass = state === "selected" ? "bg-primary-action border border-primary-action" : state === "selected-disabled" ? "bg-selected-light-bg border border-transparent" : state === "disabled" ? "bg-disabled-bg border border-transparent" : "bg-background border border-border";
+  const textClass = state === "selected" ? "text-on-primary-action" : state === "selected-disabled" ? "text-primary-action/40" : state === "disabled" ? "text-disabled" : "text-subtle-text";
+  const iconClass = state === "selected" ? "text-on-primary-action" : state === "selected-disabled" ? "text-primary-action/40" : state === "disabled" ? "text-disabled" : "text-subtle-text";
+  const icon = isMultiple && selected ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", weight: "regular", className: cn("shrink-0", s.icon, iconClass) }) : isMultiple ? /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true", weight: "regular", className: cn("shrink-0", s.icon, iconClass) }) : null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: !disabled ? onClick : void 0,
+      disabled,
+      "aria-pressed": selected,
+      className: cn(
+        "inline-flex items-center justify-center rounded-full whitespace-nowrap border transition-colors",
+        s.container,
+        isMultiple && multiplePaddingBySize[size],
+        containerClass,
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: cn("font-normal", s.text, textClass), children: label })
+      ]
+    }
+  );
+});
+Chip.displayName = "Chip";
 const MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState(
@@ -2957,6 +3019,44 @@ const Tag = forwardRef(function Tag2({
   );
 });
 Tag.displayName = "Tag";
+const statusTagStyles = {
+  stop: {
+    label: "Stop",
+    dot: "var(--fill-gray-500)"
+  },
+  success: {
+    label: "Success",
+    dot: "var(--fill-emerald-500)"
+  },
+  hold: {
+    label: "Hold",
+    dot: "var(--fill-yellow-500)"
+  },
+  processing: {
+    label: "Processing",
+    dot: "var(--fill-blue-500)"
+  },
+  error: {
+    label: "Error",
+    dot: "var(--fill-rose-500)"
+  }
+};
+function StatusTag({ type = "stop", text, className }) {
+  const style = statusTagStyles[type] ?? statusTagStyles.stop;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center justify-center gap-1 rounded-[8px] px-2 py-1",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", weight: "fill", className: "size-[8px] shrink-0", color: style.dot }),
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-[14px] leading-[20px] font-normal text-disabled", children: text ?? style.label })
+      ]
+    }
+  );
+}
 const TextArea = forwardRef(
   function TextArea2({
     placeholder = "Text label",
@@ -3776,12 +3876,14 @@ TimeInput.displayName = "TimeInput";
 export {
   Button,
   Card,
+  Chip,
   DateInput,
   Dropdown,
   DropdownMultiple,
   Input,
   OptionList,
   SearchInput,
+  StatusTag,
   Tab,
   TabGroup,
   Tag,