@scaleflex/ui-tw 0.0.158 → 0.0.159

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.158",
+  "version": "0.0.159",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,7 @@
     "@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",
+    "@scaleflex/icons-tw": "^0.0.159",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",