@scaleflex/ui-tw 0.0.74 → 0.0.76

package/alert/alert.component.d.ts

@@ -0,0 +1,17 @@
+import React, { type HTMLAttributes } from 'react';
+import { AlertProps, AlertTitleProps, VariantlessProps } from './alert.types';
+export declare const alertVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "error" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const alertIconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, size, children, icon: Icon, removable, onRemove, noSubstrate, ...props }: AlertProps): React.JSX.Element;
+declare const AlertTitle: ({ ...props }: AlertTitleProps) => React.JSX.Element;
+declare const AlertDescription: (props: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+declare const InfoAlert: (props: VariantlessProps) => React.JSX.Element;
+declare const SuccessAlert: (props: VariantlessProps) => React.JSX.Element;
+declare const WarningAlert: (props: VariantlessProps) => React.JSX.Element;
+declare const ErrorAlert: (props: VariantlessProps) => React.JSX.Element;
+export { Alert, InfoAlert, SuccessAlert, WarningAlert, ErrorAlert, AlertTitle, AlertDescription };

package/alert/alert.component.js

@@ -0,0 +1,106 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "variant", "size", "children", "icon", "removable", "onRemove", "noSubstrate"];
+import { alertIconSizeOptions, alertSizeOptions, alertVariantOptions } from '@scaleflex/ui-tw/alert/alert.constants';
+import { removePillSizeOptions } from '@scaleflex/ui-tw/pill/pill.constants';
+import { getPillCrossIconClassName } from '@scaleflex/ui-tw/pill/pill.utils';
+import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import { AlertTriangle, CircleCheck, Info, X, XCircle } from 'lucide-react';
+import React from 'react';
+export var alertVariants = cva('', {
+  variants: {
+    variant: alertVariantOptions,
+    size: alertSizeOptions
+  },
+  defaultVariants: {
+    variant: 'info',
+    size: FormSize.Md
+  }
+});
+var crossIconVariants = cva('', {
+  variants: {
+    size: removePillSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+export var alertIconVariants = cva('', {
+  variants: {
+    size: alertIconSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function Alert(_ref) {
+  var className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'info' : _ref$variant,
+    size = _ref.size,
+    children = _ref.children,
+    Icon = _ref.icon,
+    removable = _ref.removable,
+    onRemove = _ref.onRemove,
+    noSubstrate = _ref.noSubstrate,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "alert",
+    "data-slot": "alert",
+    className: cn('relative flex w-full flex-col items-start rounded-lg border p-4 text-sm', alertVariants({
+      variant: variant,
+      size: size
+    }), !!Icon && 'pl-11', removable && !noSubstrate && 'pr-11', noSubstrate && 'border-0 bg-transparent pl-7', className)
+  }, props), Icon && /*#__PURE__*/React.createElement(Icon, {
+    className: cn('absolute', alertIconVariants({
+      size: size
+    }), noSubstrate && 'left-0')
+  }), children, removable && !noSubstrate && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onRemove,
+    className: cn('absolute right-3 shrink-0 cursor-pointer opacity-60 transition-transform duration-150 ease-in-out hover:opacity-80 active:scale-85', crossIconVariants({
+      size: size
+    }), focusRingClassNames),
+    "aria-label": "Remove"
+  }, /*#__PURE__*/React.createElement(X, {
+    className: getPillCrossIconClassName(size)
+  })));
+}
+var AlertTitle = function AlertTitle(_ref2) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('font-medium')
+  }, props));
+};
+var AlertDescription = function AlertDescription(props) {
+  return /*#__PURE__*/React.createElement("div", props);
+};
+var InfoAlert = function InfoAlert(props) {
+  return /*#__PURE__*/React.createElement(Alert, _extends({}, props, {
+    icon: Info,
+    variant: "info"
+  }));
+};
+var SuccessAlert = function SuccessAlert(props) {
+  return /*#__PURE__*/React.createElement(Alert, _extends({}, props, {
+    icon: CircleCheck,
+    variant: "success"
+  }));
+};
+var WarningAlert = function WarningAlert(props) {
+  return /*#__PURE__*/React.createElement(Alert, _extends({}, props, {
+    icon: AlertTriangle,
+    variant: "warning"
+  }));
+};
+var ErrorAlert = function ErrorAlert(props) {
+  return /*#__PURE__*/React.createElement(Alert, _extends({}, props, {
+    icon: XCircle,
+    variant: "error"
+  }));
+};
+export { Alert, InfoAlert, SuccessAlert, WarningAlert, ErrorAlert, AlertTitle, AlertDescription };

package/alert/alert.constants.d.ts

@@ -0,0 +1,16 @@
+export declare const alertVariantOptions: {
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+};
+export declare const alertSizeOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const alertIconSizeOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};

package/alert/alert.constants.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var alertVariantOptions = {
+  info: 'bg-info/5 text-info-foreground border-info/5',
+  success: 'bg-success/5 text-success-foreground border-success/5',
+  warning: 'bg-warning/5 text-warning-foreground border-warning/5',
+  error: 'bg-destructive/5 text-destructive-foreground border-destructive/5'
+};
+export var alertSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'text-xs gap-1.5 py-2 px-3'), FormSize.Md, 'text-sm gap-1.5 py-3 px-4'), FormSize.Lg, 'text-base gap-2 py-4 px-5');
+export var alertIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'top-1.5 left-3.5 size-4.5'), FormSize.Md, 'top-3 left-3 size-5'), FormSize.Lg, 'top-4 left-2.5 size-6');

package/alert/alert.types.d.ts

@@ -0,0 +1,18 @@
+import { alertVariants } from '@scaleflex/ui-tw/alert/alert.component';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import { VariantProps } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react';
+import type { HTMLAttributes, MouseEvent } from 'react';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    variant?: AlertVariant;
+    size?: FormSizeType;
+    icon?: LucideIcon;
+    removable?: boolean;
+    noSubstrate?: boolean;
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export interface AlertTitleProps extends HTMLAttributes<HTMLDivElement> {
+    size?: FormSizeType;
+}
+export type VariantlessProps = Omit<AlertProps, 'variant' | 'icon'>;

package/alert/alert.types.js

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

package/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert, InfoAlert, SuccessAlert, WarningAlert, ErrorAlert } from './alert.component';
+export type { AlertProps, VariantlessProps } from './alert.types';

package/alert/index.js

@@ -0,0 +1 @@
+export { Alert, InfoAlert, SuccessAlert, WarningAlert, ErrorAlert } from './alert.component';

package/button/button.component.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ButtonProps } from './button.types';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
-    size?: "md" | "lg" | "xs" | "sm" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    variant?: "outline" | "primary" | "secondary" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/button/components/start-icon.d.ts

@@ -1,8 +1,8 @@
 import type { StartIconProps } from '@scaleflex/ui-tw/button/button.types';
 import React from 'react';
 declare const startIconVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
-    size?: "md" | "lg" | "xs" | "sm" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    variant?: "outline" | "primary" | "secondary" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const StartIcon: (props: StartIconProps) => React.JSX.Element | null;
 export { StartIcon, startIconVariants };

package/dialog/dialog.component.js

@@ -160,7 +160,7 @@ function DialogFormIcon(_ref15) {
   var className = _ref15.className,
     props = _objectWithoutProperties(_ref15, _excluded11);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cn('bg-accent mb-2 flex h-16 w-16 items-center justify-center rounded-full', "[&_svg:not([class*='text-'])]:text-primary [&_svg:not([class*='size-'])]:size-10", className)
+    className: cn('bg-accent mb-2 flex h-16 w-16 items-center justify-center rounded-full', "[&_svg:not([class*='text-'])]:text-primary [&_svg:not([class*='size-'])]:size-9", className)
   }, props));
 }
 function DialogFormWarningIcon(_ref16) {

package/input/input.component.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { InputProps } from './input.types';
 declare const inputVariants: (props?: ({
-    size?: "md" | "lg" | "sm" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Input({ className, type, size, disabled, readOnly, ...props }: InputProps): React.JSX.Element;
 export { Input, inputVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -23,7 +23,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.74",
+    "@scaleflex/icons-tw": "^0.0.76",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/pill/pill.component.d.ts

@@ -1,7 +1,7 @@
 import type { PillProps } from '@scaleflex/ui-tw/pill/pill.types';
 import React from 'react';
 declare const pillVariants: (props?: ({
-    size?: "md" | "lg" | "sm" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     variant?: "default" | "outline" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Pill({ className, size, variant, removable, onRemove, ...props }: PillProps): React.JSX.Element;

package/pill/pill.component.js

@@ -37,6 +37,7 @@ function Pill(_ref) {
     onRemove = _ref.onRemove,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
+    "aria-label": "pill",
     className: cn('border-input text-foreground border', 'inline-flex items-center rounded-full text-sm font-medium whitespace-nowrap shadow-xs transition-colors', pillVariants({
       size: size,
       variant: variant

package/pill/pill.utils.d.ts

@@ -1,2 +1,2 @@
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
-export declare const getPillCrossIconClassName: (size?: FormSizeType | null) => "size-4" | "size-5" | "size-3";
+export declare const getPillCrossIconClassName: (size?: FormSizeType | null) => "size-4" | "size-3" | "size-5";

package/select/select.component.d.ts

@@ -5,10 +5,10 @@ declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root
 declare function SelectGroup({ ...props }: ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
 export declare const selectTriggerVariants: (props?: ({
-    size?: "md" | "lg" | "sm" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const selectItemVariants: (props?: ({
-    size?: "md" | "lg" | "sm" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function SelectTrigger({ className, size, children, readOnly, icon, ...props }: SelectTriggerProps): React.JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;

package/styles/theme-map.css

@@ -36,6 +36,7 @@
   --color-success-10: var(--success-10);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
+  --color-info-10: var(--info-10);
   --color-warning: var(--warning);
   --color-warning-10: var(--warning-10);
   --color-warning-foreground: var(--warning-foreground);

package/styles/variables.css

@@ -22,6 +22,7 @@
   --destructive-10: oklch(0.967 0.016 17.438);
   --info: oklch(0.632 0.161 245.564);
   --info-foreground: oklch(0.391 0.091 241.289);
+  --info-10: oklch(0.978 0.025 248.61);
   --warning: oklch(0.734 0.157 69.419);
   --warning-foreground: oklch(0.456 0.095 58.822);
   --warning-10: oklch(0.978 0.025 86.868);
@@ -81,6 +82,7 @@
   --destructive-10: oklch(0.2 0.01 17.438);
   --info: oklch(0.65 0.2 241.34);
   --info-foreground: oklch(0.95 0.01 248.61);
+  --info-10: oklch(0.2 0.01 17.438);
   --warning: oklch(0.7 0.15 69.419);
   --warning-foreground: oklch(0.756 0.114 77.312);
   --warning-10: oklch(0.3 0.01 86.868);

package/textarea/textarea.component.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TextareaProps } from './textarea.types';
 declare const textareaVariants: (props?: ({
-    size?: "md" | "lg" | "sm" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Textarea({ className, size, disabled, readOnly, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea, textareaVariants };

package/tooltip/tooltip.component.js

@@ -49,7 +49,7 @@ function TooltipContent(_ref4) {
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, _extends({
     "data-slot": "tooltip-content",
     sideOffset: sideOffset,
-    className: cn('animate-in fade-in-0 zoom-in-95 text-md shadow-shadow z-50 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2 shadow-sm', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
+    className: cn('animate-in fade-in-0 zoom-in-95 text-md shadow-shadow z-1999 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2 shadow-sm', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
       variant: variant
     }), className)
   }, props), children));