diff --git a/apps/docs/content/components/badge/index.ts b/apps/docs/content/components/badge/index.ts index 147da069d1..0168202550 100644 --- a/apps/docs/content/components/badge/index.ts +++ b/apps/docs/content/components/badge/index.ts @@ -6,7 +6,7 @@ import placements from "./placements"; import shapes from "./shapes"; import visibility from "./visibility"; import contentExamples from "./content-examples"; -import disableOutline from "./disable-outline"; +import showOutline from "./show-outline"; import a11y from "./a11y"; export const badgeContent = { @@ -18,6 +18,6 @@ export const badgeContent = { shapes, visibility, contentExamples, - disableOutline, + showOutline, a11y, }; diff --git a/apps/docs/content/components/badge/disable-outline.ts b/apps/docs/content/components/badge/show-outline.ts similarity index 77% rename from apps/docs/content/components/badge/disable-outline.ts rename to apps/docs/content/components/badge/show-outline.ts index 2adbe419b4..d11a8860bf 100644 --- a/apps/docs/content/components/badge/disable-outline.ts +++ b/apps/docs/content/components/badge/show-outline.ts @@ -3,14 +3,14 @@ const App = `import {Badge, Avatar} from "@nextui-org/react"; export default function App() { return (
- + - + + ## Import @@ -62,9 +62,9 @@ You can control the visibility of the badge by using the `isInvisible` property. ### Disable Outline -By default, the badge has an outline, you can disable it by using the `disableOutline` property. +By default, the badge has an outline, you can disable it by using the `showOutline={false}` property. - + ### Accessibility @@ -79,18 +79,19 @@ Instead, consider supplying a comprehensive description, such as using `aria-lab ### Badge Props -| Attribute | Type | Description | Default | -| ---------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------- | -| children \* | `ReactNode` | The wrapped component. | - | -| content | `string` \| `number` \| `ReactNode` | The content of the badge. The badge will be rendered relative to its children. | - | -| variant | `solid` \| `flat` \| `faded` \| `shadow` | The variant style of the badge. | `solid` | -| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge. | `default` | -| size | `sm` \| `md` \| `lg` | The size of the badge. | `md` | -| shape | `circle` \| `rectangle` | The shape of the badge. | `rectangle` | -| placement | `top-right` \| `top-left` \| `bottom-right` \| `bottom-left` | The placement of the badge. | `top-right` | -| disableOutline | `boolean` | If `true`, the badge will not have an outline. | `false` | -| disableAnimation | `boolean` | If `true`, the badge will not have an animation. | `false` | -| isInvisible | `boolean` | If `true`, the badge will be invisible. | `false` | -| isOneChar | `boolean` | If `true`, the badge will have the same width and height. | `false` | -| isDot | `boolean` | If `true`, the badge will have smaller dimensions. | `false` | -| classNames | `Record<"base"｜"badge", string>` | Allows to set custom class names for the badge slots. | - | +| Attribute | Type | Description | Default | +| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------- | +| children \* | `ReactNode` | The wrapped component. | - | +| content | `string` \| `number` \| `ReactNode` | The content of the badge. The badge will be rendered relative to its children. | - | +| variant | `solid` \| `flat` \| `faded` \| `shadow` | The variant style of the badge. | `solid` | +| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge. | `default` | +| size | `sm` \| `md` \| `lg` | The size of the badge. | `md` | +| shape | `circle` \| `rectangle` | The shape of the badge. | `rectangle` | +| placement | `top-right` \| `top-left` \| `bottom-right` \| `bottom-left` | The placement of the badge. | `top-right` | +| showOutline | `boolean` | If `true`, the badge will have an outline. | `true` | +| disableOutline | `boolean` | If `true`, the badge will not have an outline. **Deprecated** use `showOutline` instead. | `false` | +| disableAnimation | `boolean` | If `true`, the badge will not have an animation. | `false` | +| isInvisible | `boolean` | If `true`, the badge will be invisible. | `false` | +| isOneChar | `boolean` | If `true`, the badge will have the same width and height. | `false` | +| isDot | `boolean` | If `true`, the badge will have smaller dimensions. | `false` | +| classNames | `Record<"base"｜"badge", string>` | Allows to set custom class names for the badge slots. | - | diff --git a/packages/components/badge/src/use-badge.ts b/packages/components/badge/src/use-badge.ts index faddd6e2e6..f7dffc28d2 100644 --- a/packages/components/badge/src/use-badge.ts +++ b/packages/components/badge/src/use-badge.ts @@ -21,6 +21,12 @@ interface Props extends HTMLNextUIProps<"span", "content"> { * The content of the badge. The badge will be rendered relative to its children. */ content?: string | number | ReactNode; + /** + * Whether to disable the outline around the badge. + * @deprecated use `showOutline` instead + * @default false + */ + disableOutline?: boolean; /** * Classname or List of classes to change the classNames of the element. * if `className` is passed, it will be added to the base slot. @@ -58,6 +64,9 @@ export function useBadge(originalProps: UseBadgeProps) { () => badge({ ...variantProps, + showOutline: !!originalProps?.disableOutline + ? !originalProps?.disableOutline + : originalProps?.showOutline, isOneChar, isDot, }), diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx index 3a08081d06..9649cd7ee7 100644 --- a/packages/components/slider/__tests__/slider.test.tsx +++ b/packages/components/slider/__tests__/slider.test.tsx @@ -16,4 +16,12 @@ describe("Slider", () => { render(); expect(ref.current).not.toBeNull(); }); + + it("should support aria-label", () => { + const {getByRole} = render(); + + const group = getByRole("group"); + + expect(group).toHaveAttribute("aria-label", "Aria Label"); + }); }); diff --git a/packages/components/slider/package.json b/packages/components/slider/package.json index 8f4ba3266e..af941f7362 100644 --- a/packages/components/slider/package.json +++ b/packages/components/slider/package.json @@ -49,9 +49,9 @@ "@react-aria/utils": "^3.20.0", "@react-aria/visually-hidden": "^3.8.4", "@react-stately/slider": "^3.4.2" - }, "devDependencies": { + "@nextui-org/shared-icons": "workspace:*", "clean-package": "2.2.0", "react": "^18.0.0" }, diff --git a/packages/components/slider/src/index.ts b/packages/components/slider/src/index.ts index c50eff42fa..edb2d670ac 100644 --- a/packages/components/slider/src/index.ts +++ b/packages/components/slider/src/index.ts @@ -2,6 +2,7 @@ import Slider from "./slider"; // export types export type {SliderProps} from "./slider"; +export type {SliderValue} from "./use-slider"; // export hooks export {useSlider} from "./use-slider"; diff --git a/packages/components/slider/src/slider.tsx b/packages/components/slider/src/slider.tsx index d929041e88..7b15a12dcc 100644 --- a/packages/components/slider/src/slider.tsx +++ b/packages/components/slider/src/slider.tsx @@ -3,7 +3,7 @@ import {forwardRef} from "@nextui-org/system"; import Thumb from "./slider-thumb"; import {UseSliderProps, useSlider} from "./use-slider"; -export interface SliderProps extends UseSliderProps {} +export interface SliderProps extends Omit {} const Slider = forwardRef<"div", SliderProps>((props, ref) => { const { @@ -11,14 +11,19 @@ const Slider = forwardRef<"div", SliderProps>((props, ref) => { state, label, steps, + startContent, + endContent, getStepProps, getBaseProps, + getTrackWrapperProps, getLabelWrapperProps, getLabelProps, getOutputProps, getTrackProps, getFillerProps, getThumbProps, + getStartContentProps, + getEndContentProps, } = useSlider({...props, ref}); return ( @@ -29,13 +34,17 @@ const Slider = forwardRef<"div", SliderProps>((props, ref) => {
)} -
-
- {Number.isFinite(steps) && - Array.from({length: steps}, (_, index) =>
)} - {state.values.map((_, index) => ( - - ))} +
+ {startContent &&
{startContent}
} +
+
+ {Number.isFinite(steps) && + Array.from({length: steps}, (_, index) =>
)} + {state.values.map((_, index) => ( + + ))} +
+ {endContent &&
{endContent}
}
); diff --git a/packages/components/slider/src/use-slider-thumb.ts b/packages/components/slider/src/use-slider-thumb.ts index aadbc9bc58..abbd3c42bb 100644 --- a/packages/components/slider/src/use-slider-thumb.ts +++ b/packages/components/slider/src/use-slider-thumb.ts @@ -42,6 +42,7 @@ export function useSliderThumb(props: UseSliderThumbProps) { trackRef, inputRef, name, + ...otherProps, }, state, ); diff --git a/packages/components/slider/src/use-slider.ts b/packages/components/slider/src/use-slider.ts index 46e503f793..ff8f0e6722 100644 --- a/packages/components/slider/src/use-slider.ts +++ b/packages/components/slider/src/use-slider.ts @@ -12,6 +12,8 @@ import {clsx} from "@nextui-org/shared-utils"; import {SliderThumbProps} from "./slider-thumb"; +export type SliderValue = number | number[]; + interface Props extends HTMLNextUIProps<"div"> { /** * Ref to the DOM node. @@ -35,8 +37,17 @@ interface Props extends HTMLNextUIProps<"div"> { formatOptions?: Intl.NumberFormatOptions; /** * Whether to show the step indicators. + * @default false */ showSteps?: boolean; + /** + * Element to be rendered in the start side of the slider. + */ + startContent?: React.ReactNode; + /** + * Element to be rendered in the end side of the slider. + */ + endContent?: React.ReactNode; /** * Classname or List of classes to change the classNames of the element. * if `className` is passed, it will be added to the base slot. @@ -45,6 +56,7 @@ interface Props extends HTMLNextUIProps<"div"> { * ```ts * { classNames?: SlotsToClasses; } -export type UseSliderProps = Props & Omit & SliderVariantProps; +export type UseSliderProps = Omit & AriaSliderProps & SliderVariantProps; export function useSlider(originalProps: UseSliderProps) { const [props, variantProps] = mapPropsVariants(originalProps, slider.variantKeys); - const {ref, as, name, label, formatOptions, className, classNames, fillOffset, ...otherProps} = - props; + const { + ref, + as, + name, + label, + formatOptions, + maxValue = 100, + minValue = 0, + step = 1, + showSteps = false, + orientation = "horizontal", + startContent, + endContent, + fillOffset, + className, + classNames, + ...otherProps + } = props; const Component = as || "div"; const shouldFilterDOMProps = typeof Component === "string"; @@ -73,18 +101,25 @@ export function useSlider(originalProps: UseSliderProps) { const numberFormatter = useNumberFormatter(formatOptions); const {direction} = useLocale(); - const state = useSliderState({...otherProps, numberFormatter}); - const {groupProps, trackProps, labelProps, outputProps} = useAriaSlider( - otherProps, - state, - trackRef, - ); + + const state = useSliderState({ + ...otherProps, + isDisabled: originalProps?.isDisabled ?? false, + orientation, + step, + minValue, + maxValue, + numberFormatter, + }); + + const {groupProps, trackProps, labelProps, outputProps} = useAriaSlider(props, state, trackRef); const baseStyles = clsx(classNames?.base, className); + const isVertical = orientation === "vertical"; const slots = useMemo( - () => slider({...variantProps, className}), - [...Object.values(variantProps), className], + () => slider({...variantProps, isVertical, className}), + [...Object.values(variantProps), isVertical, className], ); const [startOffset, endOffset] = [ @@ -96,14 +131,16 @@ export function useSlider(originalProps: UseSliderProps) { state.getThumbPercent(state.values.length - 1), ].sort(); + const steps = showSteps ? Math.floor((maxValue - minValue) / step) + 1 : 0; + const getBaseProps: PropGetter = (props = {}) => { return { ref: domRef, "data-orientation": state.orientation, + "data-slot": "base", className: slots.base({class: baseStyles}), ...mergeProps( groupProps, - filterDOMProps(otherProps, { enabled: shouldFilterDOMProps, }), @@ -115,6 +152,7 @@ export function useSlider(originalProps: UseSliderProps) { const getLabelWrapperProps: PropGetter = (props = {}) => { return { className: slots.labelWrapper({class: classNames?.labelWrapper}), + "data-slot": "labelWrapper", ...props, }; }; @@ -122,6 +160,7 @@ export function useSlider(originalProps: UseSliderProps) { const getLabelProps: PropGetter = (props = {}) => { return { className: slots.label({class: classNames?.label}), + "data-slot": "label", ...labelProps, ...props, }; @@ -130,6 +169,7 @@ export function useSlider(originalProps: UseSliderProps) { const getOutputProps: PropGetter = (props = {}) => { return { className: slots.output({class: classNames?.output}), + "data-slot": "output", ...outputProps, ...props, children: @@ -142,6 +182,8 @@ export function useSlider(originalProps: UseSliderProps) { const getTrackProps: PropGetter = (props = {}) => { return { ref: trackRef, + "data-slot": "track", + "data-vertical": isVertical, className: slots.track({class: classNames?.track}), "data-thumb-count": fillOffset === undefined ? state.values.length : undefined, ...trackProps, @@ -149,14 +191,29 @@ export function useSlider(originalProps: UseSliderProps) { }; }; + const getTrackWrapperProps: PropGetter = (props = {}) => { + return { + "data-slot": "track-wrapper", + className: slots.trackWrapper({class: classNames?.trackWrapper}), + ...props, + }; + }; + const getFillerProps: PropGetter = (props = {}) => { return { + "data-slot": "filler", className: slots.filler({class: classNames?.filler}), ...props, style: { ...props.style, - [direction === "rtl" ? "right" : "left"]: `${startOffset * 100}%`, - width: `${(endOffset - startOffset) * 100}%`, + [isVertical ? "bottom" : direction === "rtl" ? "right" : "left"]: `${startOffset * 100}%`, + ...(isVertical + ? { + height: `${(endOffset - startOffset) * 100}%`, + } + : { + width: `${(endOffset - startOffset) * 100}%`, + }), }, }; }; @@ -167,39 +224,56 @@ export function useSlider(originalProps: UseSliderProps) { index, state, trackRef, + orientation, className: slots.thumb({class: classNames?.thumb}), ...props, } as SliderThumbProps; }; - const {maxValue = 100, minValue = 0, step = 1, showSteps} = props; - const steps = showSteps ? Math.floor((maxValue - minValue) / step) + 1 : 0; const getStepProps = (index: number) => { const percent = state.getValuePercent(index * step + minValue); return { className: slots.step({class: classNames?.step}), + "data-slot": "step", "data-in-range": percent <= endOffset && percent >= startOffset, style: { - [direction === "rtl" ? "right" : "left"]: `${percent * 100}%`, + [isVertical ? "bottom" : direction === "rtl" ? "right" : "left"]: `${percent * 100}%`, }, }; }; + const getStartContentProps: PropGetter = (props = {}) => ({ + "data-slot": "startContent", + className: slots.startContent({class: classNames?.startContent}), + ...props, + }); + + const getEndContentProps: PropGetter = (props = {}) => ({ + "data-slot": "endContent", + className: slots.endContent({class: classNames?.endContent}), + ...props, + }); + return { Component, state, domRef, label, steps, + startContent, + endContent, getStepProps, getBaseProps, + getTrackWrapperProps, getLabelWrapperProps, getLabelProps, getOutputProps, getTrackProps, getFillerProps, getThumbProps, + getStartContentProps, + getEndContentProps, }; } diff --git a/packages/components/slider/stories/slider.stories.tsx b/packages/components/slider/stories/slider.stories.tsx index 5974905916..5008d9dbf3 100644 --- a/packages/components/slider/stories/slider.stories.tsx +++ b/packages/components/slider/stories/slider.stories.tsx @@ -1,8 +1,9 @@ import React from "react"; import {Meta} from "@storybook/react"; import {slider} from "@nextui-org/theme"; +import {VolumeHighBoldIcon, VolumeLowBoldIcon} from "@nextui-org/shared-icons"; -import {Slider, SliderProps} from "../src"; +import {Slider, SliderProps, SliderValue} from "../src"; export default { title: "Components/Slider", @@ -37,21 +38,58 @@ export default { type: "boolean", }, }, + startContent: { + table: { + disable: true, + }, + }, + endContent: { + table: { + disable: true, + }, + }, }, - decorators: [ - (Story) => ( -
- -
- ), - ], } as Meta; const defaultProps = { ...slider.defaultVariants, }; -const Template = (args: SliderProps) => ; +const Template = (args: SliderProps) => ( +
+ +
+); + +const VerticalTemplate = (args: SliderProps) => ( +
+ +
+); + +const ControlledTemplate = (args: SliderProps) => { + const [value, setValue] = React.useState(25); + + return ( +
+ +

Current volume: {value}

+
+ ); +}; + +const ControlledRangeTemplate = (args: SliderProps) => { + const [value, setValue] = React.useState([25, 75]); + + return ( +
+ +

+ Current volume: {Array.isArray(value) && value.join(" – ")} +

+
+ ); +}; export const Default = { render: Template, @@ -92,3 +130,52 @@ export const FillOffset = { defaultValue: 20, }, }; + +export const VerticalOrientation = { + render: VerticalTemplate, + args: { + ...defaultProps, + orientation: "vertical", + defaultValue: 20, + }, +}; + +export const VerticalWithSteps = { + render: VerticalTemplate, + args: { + ...defaultProps, + step: 5, + showSteps: true, + orientation: "vertical", + defaultValue: 20, + }, +}; + +export const WithStartAndEndContent = { + render: Template, + args: { + ...defaultProps, + "aria-label": "Volume", + startContent: , + endContent: , + }, +}; + +export const Controlled = { + render: ControlledTemplate, + args: { + ...defaultProps, + "aria-label": "Volume", + startContent: , + endContent: , + }, +}; + +export const ControlledRange = { + render: ControlledRangeTemplate, + args: { + ...defaultProps, + label: "Select a budget", + formatOptions: {style: "currency", currency: "USD"}, + }, +}; diff --git a/packages/core/theme/src/components/badge.ts b/packages/core/theme/src/components/badge.ts index 8a8bd02711..6d8d56252a 100644 --- a/packages/core/theme/src/components/badge.ts +++ b/packages/core/theme/src/components/badge.ts @@ -95,12 +95,12 @@ const badge = tv({ badge: "transition-transform-opacity !ease-soft-spring !duration-300", }, }, - disableOutline: { + showOutline: { true: { - badge: "border-transparent border-0", + badge: "border-2 border-background", }, false: { - badge: "border-2 border-background", + badge: "border-transparent border-0", }, }, }, @@ -110,7 +110,7 @@ const badge = tv({ size: "md", shape: "rectangle", placement: "top-right", - disableOutline: false, + showOutline: true, disableAnimation: false, isInvisible: false, }, diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts index 431a69bcf4..fccd4d59fd 100644 --- a/packages/core/theme/src/components/slider.ts +++ b/packages/core/theme/src/components/slider.ts @@ -20,16 +20,16 @@ const slider = tv({ label: "", output: "", step: [ - "h-2", - "w-2", + "h-1.5", + "w-1.5", "absolute", "rounded-full", - "top-1/2", "bg-default-300/50", "data-[in-range=true]:bg-background/50", "-translate-x-1/2", "-translate-y-1/2", ], + trackWrapper: "relative flex gap-2", track: [ "flex", "w-full", @@ -41,7 +41,6 @@ const slider = tv({ filler: "h-full absolute", thumb: [ "rounded-full", - "top-1/2", "flex", "justify-center", "items-center", @@ -56,28 +55,25 @@ const slider = tv({ "after:bg-background", dataFocusVisibleClasses, ], + startContent: [], + endContent: [], }, variants: { size: { sm: { - track: - "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-x-[calc(theme(spacing.5)/2)]", label: "text-small", output: "text-small", thumb: "w-5 h-5 after:w-4 after:h-4", step: "data-[in-range=false]:bg-default-200", }, md: { - track: - "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-x-[calc(theme(spacing.6)/2)]", thumb: "w-6 h-6 after:w-5 after:h-5", label: "text-small", output: "text-small", }, lg: { - track: - "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-x-[calc(theme(spacing.7)/2)]", thumb: "h-7 w-7 after:w-5 after:h-5", + step: "w-2 h-2", label: "text-medium", output: "text-medium", }, @@ -86,32 +82,42 @@ const slider = tv({ foreground: { filler: "bg-foreground", thumb: "bg-foreground", - track: 'data-[thumb-count="1"]:border-s-foreground', }, primary: { filler: "bg-primary", thumb: "bg-primary", - track: 'data-[thumb-count="1"]:border-s-primary', }, secondary: { filler: "bg-secondary", thumb: "bg-secondary", - track: 'data-[thumb-count="1"]:border-s-secondary', }, success: { filler: "bg-success", thumb: "bg-success", - track: 'data-[thumb-count="1"]:border-s-success', }, warning: { filler: "bg-warning", thumb: "bg-warning", - track: 'data-[thumb-count="1"]:border-s-warning', }, danger: { filler: "bg-danger", thumb: "bg-danger", - track: 'data-[thumb-count="1"]:border-s-danger', + }, + }, + isVertical: { + true: { + base: "w-auto h-full flex-col-reverse items-center", + trackWrapper: "flex-col h-full justify-center items-center", + track: "h-full", + labelWrapper: "flex-col justify-center items-center", + filler: "w-full h-auto", + step: "left-1/2", + thumb: "left-1/2", + }, + false: { + step: "top-1/2", + thumb: "top-1/2", + trackWrapper: "items-center", }, }, isDisabled: { @@ -131,8 +137,17 @@ const slider = tv({ thumb: "after:transition-all motion-reduce:after:transition-none", }, }, + showOutline: { + true: { + thumb: "ring-2 ring-background", + }, + false: { + thumb: "ring-transparent border-0", + }, + }, }, compoundVariants: [ + // size && color { size: "sm", color: "foreground", @@ -175,12 +190,150 @@ const slider = tv({ step: "data-[in-range=true]:bg-danger", }, }, + + // size && !isVertical + { + size: "sm", + isVertical: false, + class: { + track: + "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-x-[calc(theme(spacing.5)/2)]", + }, + }, + { + size: "md", + isVertical: false, + class: { + track: + "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-x-[calc(theme(spacing.6)/2)]", + }, + }, + { + size: "lg", + isVertical: false, + class: { + track: + "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-x-[calc(theme(spacing.7)/2)]", + }, + }, + // size && isVertical + { + size: "sm", + isVertical: true, + class: { + track: + "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-y-[calc(theme(spacing.5)/2)]", + }, + }, + { + size: "md", + isVertical: true, + class: { + track: + "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-y-[calc(theme(spacing.6)/2)]", + }, + }, + { + size: "lg", + isVertical: true, + class: { + track: + "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]", + }, + }, + // color && !isVertical + { + color: "foreground", + isVertical: false, + class: { + track: 'data-[thumb-count="1"]:border-s-foreground', + }, + }, + { + color: "primary", + isVertical: false, + class: { + track: 'data-[thumb-count="1"]:border-s-primary', + }, + }, + { + color: "secondary", + isVertical: false, + class: { + track: 'data-[thumb-count="1"]:border-s-secondary', + }, + }, + { + color: "success", + isVertical: false, + class: { + track: 'data-[thumb-count="1"]:border-s-success', + }, + }, + { + color: "warning", + isVertical: false, + class: { + track: 'data-[thumb-count="1"]:border-s-warning', + }, + }, + { + color: "danger", + isVertical: false, + class: { + track: 'data-[thumb-count="1"]:border-s-danger', + }, + }, + // color && isVertical + { + color: "foreground", + isVertical: true, + class: { + track: 'data-[thumb-count="1"]:border-b-foreground', + }, + }, + { + color: "primary", + isVertical: true, + class: { + track: 'data-[thumb-count="1"]:border-b-primary', + }, + }, + { + color: "secondary", + isVertical: true, + class: { + track: 'data-[thumb-count="1"]:border-b-secondary', + }, + }, + { + color: "success", + isVertical: true, + class: { + track: 'data-[thumb-count="1"]:border-b-success', + }, + }, + { + color: "warning", + isVertical: true, + class: { + track: 'data-[thumb-count="1"]:border-b-warning', + }, + }, + { + color: "danger", + isVertical: true, + class: { + track: 'data-[thumb-count="1"]:border-b-danger', + }, + }, ], defaultVariants: { size: "md", color: "primary", isDisabled: false, disableAnimation: false, + showOutline: false, }, }); diff --git a/packages/utilities/shared-icons/src/bold/index.ts b/packages/utilities/shared-icons/src/bold/index.ts index a4f685533e..f4dd4491f1 100644 --- a/packages/utilities/shared-icons/src/bold/index.ts +++ b/packages/utilities/shared-icons/src/bold/index.ts @@ -5,3 +5,5 @@ export * from "./align-right"; export * from "./align-vertically"; export * from "./align-horizontally"; export * from "./pet"; +export * from "./volume-high"; +export * from "./volume-low"; diff --git a/packages/utilities/shared-icons/src/bold/volume-high.tsx b/packages/utilities/shared-icons/src/bold/volume-high.tsx new file mode 100644 index 0000000000..3dc81188c3 --- /dev/null +++ b/packages/utilities/shared-icons/src/bold/volume-high.tsx @@ -0,0 +1,27 @@ +import {IconSvgProps} from "../types"; + +export const VolumeHighBoldIcon = (props: IconSvgProps) => ( + +); diff --git a/packages/utilities/shared-icons/src/bold/volume-low.tsx b/packages/utilities/shared-icons/src/bold/volume-low.tsx new file mode 100644 index 0000000000..c148805f37 --- /dev/null +++ b/packages/utilities/shared-icons/src/bold/volume-low.tsx @@ -0,0 +1,23 @@ +import {IconSvgProps} from "../types"; + +export const VolumeLowBoldIcon = (props: IconSvgProps) => ( + +); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2379f1d355..c7ca54e066 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1939,6 +1939,9 @@ importers: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) devDependencies: + '@nextui-org/shared-icons': + specifier: workspace:* + version: link:../../utilities/shared-icons clean-package: specifier: 2.2.0 version: 2.2.0