@scaleflex/ui-tw 0.0.158 → 0.0.160

package/accordion/accordion.component.d.ts

@@ -1,8 +1,9 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as React from 'react';
 import type { ComponentProps } from 'react';
+import { AccordionTriggerProps } from './accordion.types';
 declare function Accordion({ ...props }: ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
 declare function AccordionItem({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, chevronPosition, chevronRotation, icon, hideChevron, style, ...props }: AccordionTriggerProps): React.JSX.Element;
 declare function AccordionContent({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/accordion/accordion.component.js

@@ -1,10 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["className"],
-  _excluded2 = ["className", "children"],
+  _excluded2 = ["className", "children", "chevronPosition", "chevronRotation", "icon", "hideChevron", "style"],
   _excluded3 = ["className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { accordionTriggerVariants } from '@scaleflex/ui-tw/accordion/accordion.constants';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { ChevronDownIcon } from 'lucide-react';
 import * as React from 'react';
@@ -25,15 +29,28 @@ function AccordionItem(_ref2) {
 function AccordionTrigger(_ref3) {
   var className = _ref3.className,
     children = _ref3.children,
+    chevronPosition = _ref3.chevronPosition,
+    _ref3$chevronRotation = _ref3.chevronRotation,
+    chevronRotation = _ref3$chevronRotation === void 0 ? 180 : _ref3$chevronRotation,
+    icon = _ref3.icon,
+    _ref3$hideChevron = _ref3.hideChevron,
+    hideChevron = _ref3$hideChevron === void 0 ? false : _ref3$hideChevron,
+    style = _ref3.style,
     props = _objectWithoutProperties(_ref3, _excluded2);
   return /*#__PURE__*/React.createElement(AccordionPrimitive.Header, {
     className: "flex"
   }, /*#__PURE__*/React.createElement(AccordionPrimitive.Trigger, _extends({
     "data-slot": "accordion-trigger",
-    className: cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className)
-  }, props), children, /*#__PURE__*/React.createElement(ChevronDownIcon, {
-    className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
-  })));
+    style: _objectSpread(_defineProperty({}, '--accordion-chevron-rotation', "".concat(chevronRotation, "deg")), style),
+    className: cn(accordionTriggerVariants({
+      chevronPosition: chevronPosition
+    }), '[&[data-state=open]>[data-slot=accordion-chevron]]:rotate-(--accordion-chevron-rotation)', className)
+  }, props), children, !hideChevron && /*#__PURE__*/React.createElement("span", {
+    "data-slot": "accordion-chevron",
+    className: "text-muted-foreground pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
+  }, icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    className: "size-4"
+  }))));
 }
 function AccordionContent(_ref4) {
   var className = _ref4.className,

package/accordion/accordion.constants.d.ts

@@ -0,0 +1,3 @@
+export declare const accordionTriggerVariants: (props?: ({
+    chevronPosition?: "end" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/accordion/accordion.constants.js

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+export var accordionTriggerVariants = cva('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 cursor-pointer items-start rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50', {
+  variants: {
+    // Where the chevron sits relative to the label.
+    // `end` pushes it to the far right (default), `inline` keeps it right next to the label.
+    chevronPosition: {
+      end: 'justify-between gap-4',
+      inline: 'justify-start gap-2'
+    }
+  },
+  defaultVariants: {
+    chevronPosition: 'end'
+  }
+});

package/accordion/accordion.types.d.ts

@@ -0,0 +1,12 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
+import { accordionTriggerVariants } from './accordion.constants';
+export type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger> & VariantProps<typeof accordionTriggerVariants> & {
+    /** Custom indicator icon. Defaults to a chevron-down icon. */
+    icon?: ReactNode;
+    /** Rotation in degrees applied to the icon when the item is open. Defaults to 180. */
+    chevronRotation?: number;
+    /** Hide the indicator icon entirely. */
+    hideChevron?: boolean;
+};

package/accordion/accordion.types.js

@@ -0,0 +1 @@
+export {};

package/accordion/index.d.ts

@@ -1 +1,3 @@
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion.component';
+export { accordionTriggerVariants } from './accordion.constants';
+export type { AccordionTriggerProps } from './accordion.types';

package/accordion/index.js

@@ -1 +1,2 @@
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion.component';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion.component';
+export { accordionTriggerVariants } from './accordion.constants';

package/badge/badge.constants.d.ts

@@ -1,4 +1,4 @@
 export declare const badgeVariants: (props?: ({
-    variant?: "neutral" | "green" | "yellow" | "greenSoft" | null | undefined;
+    variant?: "green" | "yellow" | "neutral" | "greenSoft" | null | undefined;
     size?: "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dialog/dialog.component.d.ts

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
-import type { DialogContentProps, DialogHeaderProps, DialogTitleProps } from './dialog.types';
+import type { DialogContentProps, DialogDescriptionProps, DialogHeaderProps, DialogTitleProps } from './dialog.types';
 declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
@@ -9,7 +9,7 @@ declare function DialogOverlay({ className, ...props }: ComponentProps<typeof Di
 declare function DialogContent({ className, children, overlayClassName, variant, headerSize, maxWidth, hideCloseButton, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogHeader({ className, size, ...props }: DialogHeaderProps): React.JSX.Element;
 declare function DialogTitle({ className, size, align, ...props }: DialogTitleProps): React.JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogDescription({ className, visuallyHidden, ...props }: DialogDescriptionProps): React.JSX.Element;
 declare function DialogBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;

package/dialog/dialog.component.js

@@ -5,13 +5,14 @@ var _excluded = ["className"],
   _excluded2 = ["className", "children", "overlayClassName", "variant", "headerSize", "maxWidth", "hideCloseButton"],
   _excluded3 = ["className", "size"],
   _excluded4 = ["className", "size", "align"],
-  _excluded5 = ["className"],
+  _excluded5 = ["className", "visuallyHidden"],
   _excluded6 = ["className"],
   _excluded7 = ["className"],
   _excluded8 = ["className"],
   _excluded9 = ["className"],
   _excluded10 = ["className"];
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { Button } from '@scaleflex/ui-tw/button';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -160,9 +161,22 @@ function DialogTitle(_ref8) {
     }), className)
   }, props));
 }
+
+// Radix warns ("Missing `Description`...") when a Dialog has no description in the a11y tree.
+// `visuallyHidden` keeps the description for screen readers (silencing the warning) but hides it visually.
 function DialogDescription(_ref9) {
   var className = _ref9.className,
+    visuallyHidden = _ref9.visuallyHidden,
     props = _objectWithoutProperties(_ref9, _excluded5);
+  if (visuallyHidden) {
+    // `asChild` applies the hidden styles to the Description itself, so it stays the `aria-describedby` target without an extra wrapper.
+    return /*#__PURE__*/React.createElement(VisuallyHidden, {
+      asChild: true
+    }, /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
+      "data-slot": "dialog-description",
+      className: className
+    }, props)));
+  }
   return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
     "data-slot": "dialog-description",
     className: cn('text-muted-foreground text-sm', className)

package/dialog/dialog.types.d.ts

@@ -20,6 +20,10 @@ export interface DialogTitleProps extends ComponentProps<typeof DialogPrimitive.
     size?: DialogHeaderSize;
     align?: DialogTitleAlign;
 }
+export interface DialogDescriptionProps extends ComponentProps<typeof DialogPrimitive.Description> {
+    /** Render the description in the a11y tree but hide it visually. Satisfies Radix's `aria-describedby` requirement without showing description text. */
+    visuallyHidden?: boolean;
+}
 /** @deprecated Use `DialogHeaderSize` instead */
 export type DialogSize = DialogHeaderSize;
 /** @deprecated Use `DialogTitleAlign` instead */

package/dialog/index.d.ts

@@ -1,3 +1,3 @@
 export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon, DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle, } from './dialog.component';
 export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogHeaderDefaultVariants, dialogTitleDefaultVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
-export type { DialogAlign, DialogContentProps, DialogContentWidth, DialogFormContentProps, DialogHeaderProps, DialogHeaderSize, DialogSize, DialogTitleAlign, DialogTitleProps, DialogVariant, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';
+export type { DialogAlign, DialogContentProps, DialogContentWidth, DialogDescriptionProps, DialogFormContentProps, DialogHeaderProps, DialogHeaderSize, DialogSize, DialogTitleAlign, DialogTitleProps, DialogVariant, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.158",
+  "version": "0.0.160",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,8 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.158",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@scaleflex/icons-tw": "^0.0.160",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",