@mbao01/common 0.0.17 → 0.0.18

package/dist/types/components/Avatar/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const getAvatarClasses: (props?: ({
-    size?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    size?: 16 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | null | undefined;
     status?: "online" | "offline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const getAvatarImageClasses: (props?: ({
@@ -8,7 +8,7 @@ export declare const getAvatarImageClasses: (props?: ({
     ring?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const getAvatarFallbackClasses: (props?: ({
-    size?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    size?: 16 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | null | undefined;
     variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     shape?: "circle" | "round" | "hexagon" | "triangle" | "television" | null | undefined;
     ring?: boolean | null | undefined;

package/dist/types/components/Skeleton/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const getSkeletonClasses: (props?: ({
     variant?: "pulse" | null | undefined;
-    width?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
-    height?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
+    width?: 16 | 2 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | "full" | null | undefined;
+    height?: 16 | 2 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | "full" | null | undefined;
     round?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Toggle/Toggle.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Omit<{
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+    outline?: boolean | undefined;
+    wide?: boolean | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    isLoading?: boolean | undefined;
+}, "variant" | "isLoading"> & {
+    variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle };

package/dist/types/components/Toggle/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const getToggleClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Toggle/index.d.ts

@@ -0,0 +1 @@
+export { Toggle } from "./Toggle";

package/dist/types/components/Toggle/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
+import { getToggleClasses } from "./constants";
+export type BaseToggleProps = Omit<VariantProps<typeof getButtonClasses>, "variant" | "isLoading"> & VariantProps<typeof getToggleClasses>;
+export type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & BaseToggleProps;

package/dist/types/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { ToggleGroupProps } from "./types";
+declare const ToggleGroup: {
+    ({ className, variant, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & Omit<{
+        variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+        outline?: boolean | undefined;
+        wide?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        isLoading?: boolean | undefined;
+    }, "variant" | "isLoading"> & {
+        variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { ToggleGroup };

package/dist/types/components/ToggleGroup/constants.d.ts

@@ -0,0 +1 @@
+export declare const getToggleGroupClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/ToggleGroup/index.d.ts

@@ -0,0 +1 @@
+export { ToggleGroup } from "./ToggleGroup";

package/dist/types/components/ToggleGroup/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { BaseToggleProps } from "../Toggle/types";
+export type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & Pick<BaseToggleProps, "variant">;
+export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & BaseToggleProps;
+export type ToggleGroupContextType = Pick<BaseToggleProps, "variant">;

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Toggle";
 /** data display */
 export * from "./components/Alert";
 export * from "./components/Avatar";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.17",
+  "version": "0.0.18",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -73,6 +73,8 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -130,5 +132,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "626046c20b138596dc5bd520b29c885823531fb6"
+  "gitHead": "9bc26c6619e27427b22532be6aa94ea63817c0b1"
 }

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type ToggleProps } from "./types";
+import { cn } from "../../utilities";
+import { getToggleClasses } from "./constants";
+import { getButtonClasses } from "../Button/constants";
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(({ className, variant = "default", size, wide, outline, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(
+      getButtonClasses({ size, wide, outline }),
+      getToggleClasses({ variant }),
+      className
+    )}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle };

package/src/components/Toggle/constants.ts

@@ -0,0 +1,21 @@
+import { cva } from "../../libs";
+
+export const getToggleClasses = cva(
+  "transition-colors disabled:pointer-events-none disabled:opacity-50 data-[state=off]:btn-ghost",
+  {
+    variants: {
+      variant: {
+        accent: "data-[state=on]:btn-accent",
+        default: "data-[state=on]:btn-default",
+        error: "data-[state=on]:btn-error",
+        info: "data-[state=on]:btn-info",
+        link: "data-[state=on]:btn-link",
+        neutral: "data-[state=on]:btn-neutral",
+        primary: "data-[state=on]:btn-primary",
+        secondary: "data-[state=on]:btn-secondary",
+        success: "data-[state=on]:btn-success",
+        warning: "data-[state=on]:btn-warning",
+      },
+    },
+  }
+);

package/src/components/Toggle/index.ts

@@ -0,0 +1 @@
+export { Toggle } from "./Toggle";

package/src/components/Toggle/types.ts

@@ -0,0 +1,15 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
+import { getToggleClasses } from "./constants";
+
+export type BaseToggleProps = Omit<
+  VariantProps<typeof getButtonClasses>,
+  "variant" | "isLoading"
+> &
+  VariantProps<typeof getToggleClasses>;
+
+export type ToggleProps = React.ComponentPropsWithoutRef<
+  typeof TogglePrimitive.Root
+> &
+  BaseToggleProps;

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { createContext, forwardRef, useContext } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type {
+  ToggleGroupContextType,
+  ToggleGroupItemProps,
+  ToggleGroupProps,
+} from "./types";
+import { cn } from "../../utilities";
+import { getToggleClasses } from "../Toggle/constants";
+import { getToggleGroupClasses } from "./constants";
+import { getButtonClasses } from "../Button/constants";
+
+const ToggleGroupContext = createContext<ToggleGroupContextType>({
+  variant: "default",
+});
+
+const ToggleGroup = ({
+  className,
+  variant,
+  children,
+  ...props
+}: ToggleGroupProps) => (
+  <ToggleGroupPrimitive.Root
+    className={cn(getToggleGroupClasses(), className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+);
+
+const ToggleGroupItem = forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  ToggleGroupItemProps
+>(({ className, children, variant, size, wide, outline, ...props }, ref) => {
+  const context = useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        getButtonClasses({ size, wide, outline }),
+        getToggleClasses({
+          variant: context.variant ?? variant,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+ToggleGroup.Item = ToggleGroupItem;
+
+export { ToggleGroup };

package/src/components/ToggleGroup/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getToggleGroupClasses = cva(
+  "flex items-center justify-center gap-1"
+);

package/src/components/ToggleGroup/index.ts

@@ -0,0 +1 @@
+export { ToggleGroup } from "./ToggleGroup";

package/src/components/ToggleGroup/types.ts

@@ -0,0 +1,14 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { BaseToggleProps } from "../Toggle/types";
+
+export type ToggleGroupProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Root
+> &
+  Pick<BaseToggleProps, "variant">;
+
+export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Item
+> &
+  BaseToggleProps;
+
+export type ToggleGroupContextType = Pick<BaseToggleProps, "variant">;

package/src/index.ts

@@ -1,6 +1,7 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Toggle";
 
 /** data display */
 export * from "./components/Alert";