autocasting-ui-library-padimasso 1.4.2 → 1.4.3

package/dist/components/DataDisplay/Chips/ChoiceChip.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+function ChoiceChip({ label, selected = false, className, type = 'button', ...rest }) {
+    return (jsx("button", { type: type, className: clsx('px-4 py-1 rounded-full whitespace-nowrap cursor-pointer bg-transparent border-1', selected
+            ? 'text-(--color-primary-purple) border-(--color-primary-purple)'
+            : 'text-(--color-secondary-grey-fonts) border-(--color-secondary-outline)', className), "aria-pressed": selected, ...rest, children: label }));
+}
+
+export { ChoiceChip as default };

package/dist/components/DataDisplay/Chips/StatusChip.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function StatusChip({ label, dotColor, variant = 'bordered', align = 'inline', className, }) {
+    const baseClasses = 'inline-flex items-center gap-2';
+    const borderedClasses = 'rounded-xl border px-3 py-1 bg-(--color-primary-white) border-(--color-secondary-outline) text-(--color-primary-black)';
+    const inlineClasses = 'text-(--color-primary-black)';
+    const alignClasses = align === 'spaced' ? 'w-full justify-between' : '';
+    return (jsxs("span", { className: [
+            baseClasses,
+            alignClasses,
+            variant === 'bordered' ? borderedClasses : inlineClasses,
+            className ?? '',
+        ].join(' '), children: [jsx("span", { className: "text-sm", children: label }), dotColor ? (jsx("span", { className: "inline-block h-4 w-4 shrink-0 rounded-full", style: { background: dotColor }, "aria-hidden": "true" })) : null] }));
+}
+
+export { StatusChip as default };

package/dist/components/DataDisplay/Chips/TagChip.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../../Brand/Identity/Icon/Icon.js';
+
+function TagChip({ label, onRemove, newItem = false }) {
+    return (jsxs("span", { className: [
+            'inline-flex items-center gap-[6px] rounded-xl border px-3 py-1 lg:text-[14px]',
+            newItem
+                ? 'font-semibold bg-(--color-secondary-white) border-(--color-primary-purple) text-(--color-primary-purple)'
+                : 'bg-(--color-primary-white) border-(--color-secondary-outline) text-(--color-primary-black)',
+        ].join(' '), children: [jsx("p", { className: "text-sm", children: label }), onRemove && jsx(Icon, { name: "cross", variant: "primary", size: 11, onClick: onRemove })] }));
+}
+
+export { TagChip as default };

package/dist/components/Feedback/Status/Chip/InputChip.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../../../Brand/Identity/Icon/Icon.js';
+
+function InputChip({ label, onRemove, newItem = false }) {
+    return (jsxs("span", { className: [
+            'flex items-center gap-[6px] rounded-xl border px-3 py-1 lg:text-[14px]',
+            newItem
+                ? 'font-semibold bg-(--color-secondary-white) border-(--color-primary-purple) text-(--color-primary-purple)'
+                : 'bg-(--color-primary-white) border-(--color-secondary-outline) text-(--color-primary-black)',
+        ].join(' '), children: [jsx("p", { className: "text-sm", children: label }), onRemove && jsx(Icon, { name: "cross", variant: "primary", size: 11, onClick: onRemove })] }));
+}
+
+export { InputChip as default };

package/dist/components/Feedback/Status/Chip/index.js

@@ -0,0 +1,7 @@
+import Chip from './Chip.js';
+import 'react/jsx-runtime';
+
+// `Chip` here is an input/removable token. `StatusChip` is for state display.
+const InputChip = Chip;
+
+export { Chip, InputChip };

package/dist/components/Navigation/Selection/ChoiceChip/ChoiceChip.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+function ChoiceChip({ label, selected = false, className, type = 'button', ...rest }) {
+    return (jsx("button", { type: type, className: clsx('px-4 py-1 rounded-full whitespace-nowrap cursor-pointer bg-transparent border-1', selected
+            ? 'text-(--color-primary-purple) border-(--color-primary-purple)'
+            : 'text-(--color-secondary-grey-fonts) border-(--color-secondary-outline)', className), "aria-pressed": selected, ...rest, children: label }));
+}
+
+export { ChoiceChip as default };

package/dist/components/Navigation/Selection/ProfessionChip/ProfessionChip.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+function ProfessionChip({ label, selected = false, className, type = 'button', ...rest }) {
+    return (jsx("button", { type: type, className: clsx('px-4 py-1 rounded-full whitespace-nowrap cursor-pointer bg-transparent border-1', selected
+            ? 'text-(--color-primary-purple) border-(--color-primary-purple)'
+            : 'text-(--color-secondary-grey-fonts) border-(--color-secondary-outline)', className), "aria-pressed": selected, ...rest, children: label }));
+}
+
+export { ProfessionChip as default };

package/dist/components/Navigation/Selection/ProfessionChip/index.js

@@ -0,0 +1,5 @@
+import SelectableChip from '../SelectableChip/SelectableChip.js';
+
+const ProfessionChip = SelectableChip;
+
+export { ProfessionChip };

package/dist/components/Navigation/Selection/SelectableChip/SelectableChip.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+function SelectableChip({ label, selected = false, className, type = 'button', ...rest }) {
+    return (jsx("button", { type: type, className: clsx('px-4 py-1 rounded-full whitespace-nowrap cursor-pointer bg-transparent border-1', selected
+            ? 'text-(--color-primary-purple) border-(--color-primary-purple)'
+            : 'text-(--color-secondary-grey-fonts) border-(--color-secondary-outline)', className), "aria-pressed": selected, ...rest, children: label }));
+}
+
+export { SelectableChip as default };

package/dist/components/Navigation/Selection/SelectableChip/index.js

@@ -0,0 +1,8 @@
+import 'react/jsx-runtime';
+import 'clsx';
+import ChoiceChip from '../ChoiceChip/ChoiceChip.js';
+
+// Legacy alias kept for compatibility with previous onboarding implementation.
+const ProfessionChip = ChoiceChip;
+
+export { ChoiceChip, ProfessionChip };

package/dist/index.d.ts

@@ -192,12 +192,18 @@ type SpinnerProps = {
 };
 declare function Spinner({ color, strokeWidth, className, ariaLabel, arc, speedMs, }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
-type ChipProps = {
+type ChoiceChipProps = {
+    label: string;
+    selected?: boolean;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+declare function ChoiceChip({ label, selected, className, type, ...rest }: ChoiceChipProps): react_jsx_runtime.JSX.Element;
+
+type TagChipProps = {
     label: string;
     onRemove?: () => void;
     newItem?: boolean;
 };
-declare function Chip({ label, onRemove, newItem }: ChipProps): react_jsx_runtime.JSX.Element;
+declare function TagChip({ label, onRemove, newItem }: TagChipProps): react_jsx_runtime.JSX.Element;
 
 type StatusChipVariant = 'bordered' | 'inline';
 type StatusChipAlign = 'inline' | 'spaced';
@@ -513,5 +519,5 @@ type WizardProps = {
 };
 declare function Wizard({ children }: WizardProps): ReactElement<WizardStepProps, string | React$1.JSXElementConstructor<any>>;
 
-export { Button, ButtonRow, ChevronLeft, ChevronRight, ChevronUpDown, Chip, CurrencyInput, DataGrid, DetailsView, FormCurrencyField, FormInputField, FormPasswordField, FormSelectField, FullscreenCenter, GoogleButton, HilighterSvg, Icon, IconViewSwitcher, ImageCarousel, Input, Label, Logo, Modal, OverflowMenu, PasswordInput, PhotoZoomOverlay, Pills, SearchInput, SearchWithSuggestions, Select, Separator, Spinner, StatusChip, TextDropdownTrigger, Toast, ToastProvider, Tooltip, UniversalVideoPlayer, UploadTile, VideoPreviewCard, Wizard, WizardStep, clearToasts, dismissToast, showToast, useDebouncedValue, useToast, useViewportVhVar };
-export type { DataGridActions, DataGridColumn, DataGridPagination, DataGridSelection, IconName, IconVariant, OverflowMenuAlign, OverflowMenuItem, OverflowMenuSide, PillItem, ShowToastOptions, ToastContent, ToastContextValue, ToastPosition, ToastProps, ToastRecord, ToastType, TooltipPosition, TooltipProps, UniversalVideoPlayerProps, VideoProvider, WizardStepProps };
+export { Button, ButtonRow, ChevronLeft, ChevronRight, ChevronUpDown, ChoiceChip, CurrencyInput, DataGrid, DetailsView, FormCurrencyField, FormInputField, FormPasswordField, FormSelectField, FullscreenCenter, GoogleButton, HilighterSvg, Icon, IconViewSwitcher, ImageCarousel, Input, Label, Logo, Modal, OverflowMenu, PasswordInput, PhotoZoomOverlay, Pills, SearchInput, SearchWithSuggestions, Select, Separator, Spinner, StatusChip, TagChip, TextDropdownTrigger, Toast, ToastProvider, Tooltip, UniversalVideoPlayer, UploadTile, VideoPreviewCard, Wizard, WizardStep, clearToasts, dismissToast, showToast, useDebouncedValue, useToast, useViewportVhVar };
+export type { ChoiceChipProps, DataGridActions, DataGridColumn, DataGridPagination, DataGridSelection, IconName, IconVariant, OverflowMenuAlign, OverflowMenuItem, OverflowMenuSide, PillItem, ShowToastOptions, StatusChipProps, TagChipProps, ToastContent, ToastContextValue, ToastPosition, ToastProps, ToastRecord, ToastType, TooltipPosition, TooltipProps, UniversalVideoPlayerProps, VideoProvider, WizardStepProps };

package/dist/index.js

@@ -13,8 +13,9 @@ export { Icon } from './components/Brand/Identity/Icon/Icon.js';
 export { default as HilighterSvg } from './components/Brand/Identity/Icon/HilighterSvg.js';
 export { default as Logo } from './components/Brand/Identity/Logo/Logo.js';
 export { default as Spinner } from './components/Feedback/Loading/Spinner/Spinner.js';
-export { default as Chip } from './components/Feedback/Status/Chip/Chip.js';
-export { default as StatusChip } from './components/Feedback/Status/Chip/StatusChip.js';
+export { default as ChoiceChip } from './components/DataDisplay/Chips/ChoiceChip.js';
+export { default as TagChip } from './components/DataDisplay/Chips/TagChip.js';
+export { default as StatusChip } from './components/DataDisplay/Chips/StatusChip.js';
 export { default as Toast } from './components/Feedback/Toast/Toast.js';
 export { ToastProvider, clearToasts, dismissToast, showToast, useToast } from './components/Feedback/Toast/ToastProvider.js';
 export { default as Input } from './components/Forms/primitive/Input/Input.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autocasting-ui-library-padimasso",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "UI Library para el ecosistema de Auto Casting by Padimasso",
   "type": "module",
   "main": "dist/index.js",

package/src/components/DataDisplay/Chips/ChoiceChip.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import ChoiceChip from './ChoiceChip';
+
+const meta: Meta<typeof ChoiceChip> = {
+  title: 'DataDisplay/Chips/ChoiceChip',
+  component: ChoiceChip,
+  tags: ['autodocs'],
+  args: {
+    label: 'Actor/Actriz',
+    selected: false,
+  },
+  render: (args) => {
+    const [selected, setSelected] = useState(Boolean(args.selected));
+
+    return (
+      <div className="p-4">
+        <ChoiceChip {...args} selected={selected} onClick={() => setSelected((prev) => !prev)} />
+      </div>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Selected: Story = {
+  args: {
+    selected: true,
+  },
+};

package/src/components/DataDisplay/Chips/ChoiceChip.tsx

@@ -0,0 +1,26 @@
+import { clsx } from 'clsx';
+import type { ButtonHTMLAttributes } from 'react';
+
+export type ChoiceChipProps = {
+  label: string;
+  selected?: boolean;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+
+export default function ChoiceChip({ label, selected = false, className, type = 'button', ...rest }: ChoiceChipProps) {
+  return (
+    <button
+      type={type}
+      className={clsx(
+        'px-4 py-1 rounded-full whitespace-nowrap cursor-pointer bg-transparent border-1',
+        selected
+          ? 'text-(--color-primary-purple) border-(--color-primary-purple)'
+          : 'text-(--color-secondary-grey-fonts) border-(--color-secondary-outline)',
+        className
+      )}
+      aria-pressed={selected}
+      {...rest}
+    >
+      {label}
+    </button>
+  );
+}

package/src/components/{Feedback/Status/Chip → DataDisplay/Chips}/StatusChip.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import StatusChip from './StatusChip';
 
 const meta: Meta<typeof StatusChip> = {
-  title: 'Feedback/Status/Status Chip',
+  title: 'DataDisplay/Chips/StatusChip',
   component: StatusChip,
   tags: ['autodocs'],
   args: {

package/src/components/DataDisplay/Chips/TagChip.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import TagChip from './TagChip';
+
+const meta: Meta<typeof TagChip> = {
+  title: 'DataDisplay/Chips/TagChip',
+  component: TagChip,
+  tags: ['autodocs'],
+  args: {
+    label: 'Actor',
+    newItem: false,
+  },
+  render: (args) => (
+    <div className="p-4">
+      <TagChip {...args} />
+    </div>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/{Feedback/Status/Chip/Chip.tsx → DataDisplay/Chips/TagChip.tsx}

@@ -1,16 +1,16 @@
-import { Icon } from '../../../Brand/Identity/Icon';
+import { Icon } from '../../Brand/Identity/Icon';
 
-type ChipProps = {
+export type TagChipProps = {
   label: string;
   onRemove?: () => void;
   newItem?: boolean;
 };
 
-export default function Chip({ label, onRemove, newItem = false }: ChipProps) {
+export default function TagChip({ label, onRemove, newItem = false }: TagChipProps) {
   return (
     <span
       className={[
-        'flex items-center gap-[6px] rounded-xl border px-3 py-1 lg:text-[14px]',
+        'inline-flex items-center gap-[6px] rounded-xl border px-3 py-1 lg:text-[14px]',
         newItem
           ? 'font-semibold bg-(--color-secondary-white) border-(--color-primary-purple) text-(--color-primary-purple)'
           : 'bg-(--color-primary-white) border-(--color-secondary-outline) text-(--color-primary-black)',

package/src/components/DataDisplay/Chips/index.ts

@@ -0,0 +1,8 @@
+import ChoiceChip from './ChoiceChip';
+import TagChip from './TagChip';
+import StatusChip from './StatusChip';
+
+export { ChoiceChip, TagChip, StatusChip };
+export type { ChoiceChipProps } from './ChoiceChip';
+export type { TagChipProps } from './TagChip';
+export type { StatusChipProps } from './StatusChip';

package/src/index.ts

@@ -9,7 +9,7 @@ export * from './components/Actions/Menus/TextDropdownTrigger';
 export * from './components/Brand/Identity/Icon';
 export * from './components/Brand/Identity/Logo';
 export * from './components/Feedback/Loading/Spinner';
-export * from './components/Feedback/Status/Chip';
+export * from './components/DataDisplay/Chips';
 export * from './components/Feedback/Toast';
 export * from './components/Forms';
 export * from './components/Media/Images/ImageCarousel';

package/src/components/Feedback/Status/Chip/Chip.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import Chip from './Chip';
-
-const meta: Meta<typeof Chip> = {
-  title: 'Feedback/Status/Chip',
-  component: Chip,
-  tags: ['autodocs'],
-  args: {
-    label: 'Talent',
-    onRemove: () => undefined,
-  },
-  render: (args) => (
-    <div className="flex min-h-[120px] items-center justify-center">
-      <Chip {...args} />
-    </div>
-  ),
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const NewItem: Story = {
-  args: {
-    newItem: true,
-  },
-};

package/src/components/Feedback/Status/Chip/index.ts

@@ -1,3 +0,0 @@
-import Chip from './Chip';
-import StatusChip from './StatusChip';
-export { Chip, StatusChip };