@discourser/design-system 0.6.0 → 0.7.0

package/dist/index.d.cts

@@ -3,7 +3,6 @@ import react__default, { ElementType, ComponentType, Component, JSX, ComponentPr
 import { RecipeConfig as RecipeConfig$1, SlotRecipeConfig as SlotRecipeConfig$1, GlobalStyleObject as GlobalStyleObject$1, TextStyles as TextStyles$1, LayerStyles as LayerStyles$1, PatternConfig as PatternConfig$1, RecipeVariantRecord as RecipeVariantRecord$1 } from '@pandacss/types';
 import * as _ark_ui_react from '@ark-ui/react';
 import { Assign as Assign$1, SelectRootProps } from '@ark-ui/react';
-import { ClassValue } from 'clsx';
 import { Field } from '@ark-ui/react/field';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { createToaster } from '@ark-ui/react/toast';
@@ -19,6 +18,7 @@ import { Avatar as Avatar$1, AvatarContext } from '@ark-ui/react/avatar';
 import { Progress as Progress$1 } from '@ark-ui/react/progress';
 import { Popover as Popover$1, PopoverContext } from '@ark-ui/react/popover';
 import { Tooltip as Tooltip$2, TooltipContext } from '@ark-ui/react/tooltip';
+import { ClassValue } from 'clsx';
 
 /* eslint-disable */
 interface ConditionOptions {
@@ -21010,12 +21010,19 @@ interface ButtonLoadingProps {
 }
 type BaseButtonProps = ComponentProps$1<typeof BaseButton>;
 declare const BaseButton: StyledComponent<react__default.ForwardRefExoticComponent<react__default.ClassAttributes<HTMLButtonElement> & react__default.ButtonHTMLAttributes<HTMLButtonElement> & _ark_ui_react.PolymorphicProps>, ButtonVariantProps>;
-interface ButtonProps$1 extends BaseButtonProps, ButtonLoadingProps {
+interface ButtonProps extends Omit<BaseButtonProps, 'colorPalette'>, ButtonLoadingProps {
+    /**
+     * The color palette to use for the button.
+     * @default "primary"
+     */
+    colorPalette?: 'primary' | 'neutral' | 'error' | 'gray' | 'red' | undefined;
 }
+declare const Button: react__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
 interface ButtonGroupProps extends GroupProps, ButtonVariantProps {
 }
+declare const ButtonGroup: react__default.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-interface IconButtonProps extends ButtonProps$1 {
+interface IconButtonProps extends ButtonProps {
 }
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
@@ -21046,8 +21053,16 @@ type Props = HeadingVariantProps & {
 type HeadingProps = ComponentProps$1<typeof Heading>;
 declare const Heading: StyledComponent<"h2", Props>;
 
-type BadgeProps = ComponentProps$1<typeof Badge>;
-declare const Badge: StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react.PolymorphicProps>, BadgeVariantProps>;
+type BaseBadgeProps = ComponentProps$1<typeof BaseBadge>;
+declare const BaseBadge: StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react.PolymorphicProps>, BadgeVariantProps>;
+interface BadgeProps extends Omit<BaseBadgeProps, 'colorPalette'> {
+    /**
+     * The color palette to use for the badge.
+     * @default "primary"
+     */
+    colorPalette?: 'primary' | 'neutral' | 'error' | 'gray' | 'red' | undefined;
+}
+declare const Badge: react.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 type SpinnerProps = ComponentProps$1<typeof Spinner>;
 declare const Spinner: StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & _ark_ui_react.PolymorphicProps>, SpinnerVariantProps>;
@@ -21911,11 +21926,6 @@ declare namespace AbsoluteCenter$1 {
   export { AbsoluteCenter$1_AbsoluteCenter as AbsoluteCenter, type AbsoluteCenter$1_AbsoluteCenterProps as AbsoluteCenterProps };
 }
 
-declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps$1, "ref"> & react.RefAttributes<HTMLButtonElement>> & {
-    Group: react.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-};
-type ButtonProps = ButtonProps$1;
-
 declare const buttonRecipe: RecipeConfig$1<RecipeVariantRecord$1>;
 
 declare const cardRecipe: RecipeConfig$1<RecipeVariantRecord$1>;
@@ -22213,4 +22223,4 @@ declare function transformToPandaTheme(language: DesignLanguageContract): {
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AbsoluteCenter$1 as AbsoluteCenter, Accordion, Avatar, Badge, type BadgeProps, type BorderConfig, type BorderWidthScale, Button, type ButtonGroupProps, type ButtonProps, Card$1 as Card, Checkbox, CloseButton$1 as CloseButton, type ColorPalettes, type DesignLanguageContract, Dialog, Drawer, type DurationScale, type EasingScale, type ElevationConfig, type ElevationScale, Group$2 as Group, Heading, type HeadingProps, Icon$1 as Icon, IconButton, type IconButtonProps, Input, InputAddon, type InputAddonProps, InputGroup, type InputGroupProps, type InputProps, type MotionConfig, Popover, Progress, type RadiiScale, RadioGroup, Select, type SemanticColors, type ShapeConfig, Skeleton$1 as Skeleton, Slider, type SpacingScale, Spinner, type SpinnerProps, Switch, Tabs, Textarea, type TextareaProps, Toaster, type TonalPalette, Tooltip$1 as Tooltip, type TypeStyle, type TypographyConfig, type TypographyScale, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
+export { AbsoluteCenter$1 as AbsoluteCenter, Accordion, Avatar, Badge, type BadgeProps, type BorderConfig, type BorderWidthScale, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card$1 as Card, Checkbox, CloseButton$1 as CloseButton, type ColorPalettes, type DesignLanguageContract, Dialog, Drawer, type DurationScale, type EasingScale, type ElevationConfig, type ElevationScale, Group$2 as Group, Heading, type HeadingProps, Icon$1 as Icon, IconButton, type IconButtonProps, Input, InputAddon, type InputAddonProps, InputGroup, type InputGroupProps, type InputProps, type MotionConfig, Popover, Progress, type RadiiScale, RadioGroup, Select, type SemanticColors, type ShapeConfig, Skeleton$1 as Skeleton, Slider, type SpacingScale, Spinner, type SpinnerProps, Switch, Tabs, Textarea, type TextareaProps, Toaster, type TonalPalette, Tooltip$1 as Tooltip, type TypeStyle, type TypographyConfig, type TypographyScale, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import react__default, { ElementType, ComponentType, Component, JSX, ComponentPr
 import { RecipeConfig as RecipeConfig$1, SlotRecipeConfig as SlotRecipeConfig$1, GlobalStyleObject as GlobalStyleObject$1, TextStyles as TextStyles$1, LayerStyles as LayerStyles$1, PatternConfig as PatternConfig$1, RecipeVariantRecord as RecipeVariantRecord$1 } from '@pandacss/types';
 import * as _ark_ui_react from '@ark-ui/react';
 import { Assign as Assign$1, SelectRootProps } from '@ark-ui/react';
-import { ClassValue } from 'clsx';
 import { Field } from '@ark-ui/react/field';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { createToaster } from '@ark-ui/react/toast';
@@ -19,6 +18,7 @@ import { Avatar as Avatar$1, AvatarContext } from '@ark-ui/react/avatar';
 import { Progress as Progress$1 } from '@ark-ui/react/progress';
 import { Popover as Popover$1, PopoverContext } from '@ark-ui/react/popover';
 import { Tooltip as Tooltip$2, TooltipContext } from '@ark-ui/react/tooltip';
+import { ClassValue } from 'clsx';
 
 /* eslint-disable */
 interface ConditionOptions {
@@ -21010,12 +21010,19 @@ interface ButtonLoadingProps {
 }
 type BaseButtonProps = ComponentProps$1<typeof BaseButton>;
 declare const BaseButton: StyledComponent<react__default.ForwardRefExoticComponent<react__default.ClassAttributes<HTMLButtonElement> & react__default.ButtonHTMLAttributes<HTMLButtonElement> & _ark_ui_react.PolymorphicProps>, ButtonVariantProps>;
-interface ButtonProps$1 extends BaseButtonProps, ButtonLoadingProps {
+interface ButtonProps extends Omit<BaseButtonProps, 'colorPalette'>, ButtonLoadingProps {
+    /**
+     * The color palette to use for the button.
+     * @default "primary"
+     */
+    colorPalette?: 'primary' | 'neutral' | 'error' | 'gray' | 'red' | undefined;
 }
+declare const Button: react__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
 interface ButtonGroupProps extends GroupProps, ButtonVariantProps {
 }
+declare const ButtonGroup: react__default.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-interface IconButtonProps extends ButtonProps$1 {
+interface IconButtonProps extends ButtonProps {
 }
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
@@ -21046,8 +21053,16 @@ type Props = HeadingVariantProps & {
 type HeadingProps = ComponentProps$1<typeof Heading>;
 declare const Heading: StyledComponent<"h2", Props>;
 
-type BadgeProps = ComponentProps$1<typeof Badge>;
-declare const Badge: StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react.PolymorphicProps>, BadgeVariantProps>;
+type BaseBadgeProps = ComponentProps$1<typeof BaseBadge>;
+declare const BaseBadge: StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react.PolymorphicProps>, BadgeVariantProps>;
+interface BadgeProps extends Omit<BaseBadgeProps, 'colorPalette'> {
+    /**
+     * The color palette to use for the badge.
+     * @default "primary"
+     */
+    colorPalette?: 'primary' | 'neutral' | 'error' | 'gray' | 'red' | undefined;
+}
+declare const Badge: react.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 type SpinnerProps = ComponentProps$1<typeof Spinner>;
 declare const Spinner: StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & _ark_ui_react.PolymorphicProps>, SpinnerVariantProps>;
@@ -21911,11 +21926,6 @@ declare namespace AbsoluteCenter$1 {
   export { AbsoluteCenter$1_AbsoluteCenter as AbsoluteCenter, type AbsoluteCenter$1_AbsoluteCenterProps as AbsoluteCenterProps };
 }
 
-declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps$1, "ref"> & react.RefAttributes<HTMLButtonElement>> & {
-    Group: react.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-};
-type ButtonProps = ButtonProps$1;
-
 declare const buttonRecipe: RecipeConfig$1<RecipeVariantRecord$1>;
 
 declare const cardRecipe: RecipeConfig$1<RecipeVariantRecord$1>;
@@ -22213,4 +22223,4 @@ declare function transformToPandaTheme(language: DesignLanguageContract): {
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AbsoluteCenter$1 as AbsoluteCenter, Accordion, Avatar, Badge, type BadgeProps, type BorderConfig, type BorderWidthScale, Button, type ButtonGroupProps, type ButtonProps, Card$1 as Card, Checkbox, CloseButton$1 as CloseButton, type ColorPalettes, type DesignLanguageContract, Dialog, Drawer, type DurationScale, type EasingScale, type ElevationConfig, type ElevationScale, Group$2 as Group, Heading, type HeadingProps, Icon$1 as Icon, IconButton, type IconButtonProps, Input, InputAddon, type InputAddonProps, InputGroup, type InputGroupProps, type InputProps, type MotionConfig, Popover, Progress, type RadiiScale, RadioGroup, Select, type SemanticColors, type ShapeConfig, Skeleton$1 as Skeleton, Slider, type SpacingScale, Spinner, type SpinnerProps, Switch, Tabs, Textarea, type TextareaProps, Toaster, type TonalPalette, Tooltip$1 as Tooltip, type TypeStyle, type TypographyConfig, type TypographyScale, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
+export { AbsoluteCenter$1 as AbsoluteCenter, Accordion, Avatar, Badge, type BadgeProps, type BorderConfig, type BorderWidthScale, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card$1 as Card, Checkbox, CloseButton$1 as CloseButton, type ColorPalettes, type DesignLanguageContract, Dialog, Drawer, type DurationScale, type EasingScale, type ElevationConfig, type ElevationScale, Group$2 as Group, Heading, type HeadingProps, Icon$1 as Icon, IconButton, type IconButtonProps, Input, InputAddon, type InputAddonProps, InputGroup, type InputGroupProps, type InputProps, type MotionConfig, Popover, Progress, type RadiiScale, RadioGroup, Select, type SemanticColors, type ShapeConfig, Skeleton$1 as Skeleton, Slider, type SpacingScale, Spinner, type SpinnerProps, Switch, Tabs, Textarea, type TextareaProps, Toaster, type TonalPalette, Tooltip$1 as Tooltip, type TypeStyle, type TypographyConfig, type TypographyScale, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };

package/dist/index.js

@@ -1,6 +1,7 @@
 import { ark as ark$1 } from '@ark-ui/react/factory';
 import { createContext, mergeProps } from '@ark-ui/react/utils';
 import { forwardRef, useMemo, createContext as createContext$1, useContext } from 'react';
+import { cx, css } from '@discourser/design-system/styled-system/css';
 import { styled, createStyleContext, Stack } from '@discourser/design-system/styled-system/jsx';
 import { group, absoluteCenter, spinner, button, input, inputAddon, inputGroup, textarea, heading, badge, toast, card, dialog, switchComponent, accordion, drawer, tabs, checkbox, radioGroup, select, slider, avatar, progress, skeleton, popover, tooltip } from '@discourser/design-system/styled-system/recipes';
 import { ark } from '@ark-ui/react';
@@ -69,28 +70,53 @@ var Loader = forwardRef(function Loader2(props, ref) {
   return /* @__PURE__ */ jsx(Span, { ref, display: "contents", ...rest, children });
 });
 var BaseButton = styled(ark$1.button, button);
-var Button = forwardRef(function Button2(props, ref) {
-  const propsContext = useButtonPropsContext();
-  const buttonProps = useMemo(
-    () => mergeProps(propsContext, props),
-    [propsContext, props]
-  );
-  const { loading, loadingText, children, spinner: spinner2, spinnerPlacement, ...rest } = buttonProps;
-  return /* @__PURE__ */ jsx(
-    BaseButton,
-    {
-      type: "button",
-      ref,
-      ...rest,
-      "data-loading": loading ? "" : void 0,
-      disabled: loading || rest.disabled,
-      children: !props.asChild && loading ? /* @__PURE__ */ jsx(Loader, { spinner: spinner2, text: loadingText, spinnerPlacement, children }) : children
-    }
-  );
-});
+var Button = forwardRef(
+  function Button2(props, ref) {
+    const propsContext = useButtonPropsContext();
+    const buttonProps = useMemo(
+      () => mergeProps(propsContext, props),
+      [propsContext, props]
+    );
+    const {
+      loading,
+      loadingText,
+      children,
+      spinner: spinner2,
+      spinnerPlacement,
+      colorPalette = "primary",
+      className,
+      ...rest
+    } = buttonProps;
+    const colorPaletteClass = `color-palette_${colorPalette}`;
+    const mergedClassName = cx(colorPaletteClass, className);
+    return /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        type: "button",
+        ref,
+        ...rest,
+        className: mergedClassName,
+        "data-loading": loading ? "" : void 0,
+        disabled: loading || rest.disabled,
+        children: !props.asChild && loading ? /* @__PURE__ */ jsx(
+          Loader,
+          {
+            spinner: spinner2,
+            text: loadingText,
+            spinnerPlacement,
+            children
+          }
+        ) : children
+      }
+    );
+  }
+);
 var ButtonGroup = forwardRef(
   function ButtonGroup2(props, ref) {
-    const [variantProps, otherProps] = useMemo(() => button.splitVariantProps(props), [props]);
+    const [variantProps, otherProps] = useMemo(
+      () => button.splitVariantProps(props),
+      [props]
+    );
     return /* @__PURE__ */ jsx(ButtonPropsProvider, { value: variantProps, children: /* @__PURE__ */ jsx(Group, { ref, ...otherProps }) });
   }
 );
@@ -126,7 +152,15 @@ var InputGroup2 = Object.assign(InputGroupRoot, {
 });
 var Textarea = styled(Field.Textarea, textarea);
 var Heading = styled("h2", heading);
-var Badge = styled(ark$1.div, badge);
+var BaseBadge = styled(ark$1.div, badge);
+var Badge = forwardRef(
+  function Badge2(props, ref) {
+    const { colorPalette = "primary", className, ...rest } = props;
+    const colorPaletteClass = css({ colorPalette });
+    const mergedClassName = cx(colorPaletteClass, className);
+    return /* @__PURE__ */ jsx(BaseBadge, { ref, ...rest, className: mergedClassName });
+  }
+);
 
 // src/components/CloseButton.tsx
 var CloseButton_exports = {};
@@ -757,11 +791,6 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
   ] });
 });
 
-// src/components/index.ts
-var Button3 = Object.assign(Button, {
-  Group: ButtonGroup
-});
-
 // node_modules/.pnpm/@pandacss+dev@1.8.0_hono@4.11.3_jsdom@27.4.0_typescript@5.9.3/node_modules/@pandacss/dev/dist/index.mjs
 function defineRecipe(config) {
   return config;
@@ -1842,6 +1871,6 @@ function cn(...inputs) {
   return clsx(inputs);
 }
 
-export { AbsoluteCenter_exports as AbsoluteCenter, Accordion_exports as Accordion, Avatar_exports as Avatar, Badge, Button3 as Button, Card_exports as Card, Checkbox_exports as Checkbox, CloseButton_exports as CloseButton, Dialog_exports as Dialog, Drawer_exports as Drawer, Group_exports as Group, Heading, Icon_exports as Icon, IconButton, Input, InputAddon, InputGroup2 as InputGroup, Popover_exports as Popover, Progress_exports as Progress, RadioGroup_exports as RadioGroup, Select_exports as Select, Skeleton_exports as Skeleton, Slider_exports as Slider, Spinner, Switch_exports as Switch, Tabs_exports as Tabs, Textarea, Toaster, Tooltip_exports as Tooltip, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
+export { AbsoluteCenter_exports as AbsoluteCenter, Accordion_exports as Accordion, Avatar_exports as Avatar, Badge, Button, ButtonGroup, Card_exports as Card, Checkbox_exports as Checkbox, CloseButton_exports as CloseButton, Dialog_exports as Dialog, Drawer_exports as Drawer, Group_exports as Group, Heading, Icon_exports as Icon, IconButton, Input, InputAddon, InputGroup2 as InputGroup, Popover_exports as Popover, Progress_exports as Progress, RadioGroup_exports as RadioGroup, Select_exports as Select, Skeleton_exports as Skeleton, Slider_exports as Slider, Spinner, Switch_exports as Switch, Tabs_exports as Tabs, Textarea, Toaster, Tooltip_exports as Tooltip, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map