@stack-spot/citric-react 0.25.0 → 0.26.0

package/dist/components/Button.d.ts

@@ -47,7 +47,7 @@ export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'>
  *
  * @example
  * ```
- * <Button>My Button</MyButton>
+ * <Button>My Button</Button>
  * ```
  */
 export declare const Button: ({ appearance, size, feedback, loading, disabled, onClick, className, children, type, analytics, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button.js

@@ -13,7 +13,7 @@ import { ProgressCircular } from './ProgressCircular.js';
  *
  * @example
  * ```
- * <Button>My Button</MyButton>
+ * <Button>My Button</Button>
  * ```
  */
 export const Button = withRef(({ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', analytics, ...props }) => {

package/dist/components/ButtonLink.d.ts

@@ -0,0 +1,16 @@
+import { BaseButtonProps } from './Button.js';
+export type BaseButtonLinkProps = Omit<BaseButtonProps, 'onClick' | 'loading' | 'type'>;
+export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkProps;
+/**
+ * Renders a link with the appearance of a button.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <ButtonLink href="#">My Button Link</ButtonLink>
+ * ```
+ */
+export declare const ButtonLink: ({ appearance, size, feedback, onClick, className, children, analytics, ...props }: ButtonLinkProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonLink.d.ts.map

package/dist/components/ButtonLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA;AACvF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,mBAAmB,CAAA;AAEpF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,sFAC8D,eAAe,4CAsBlG,CAAA"}

package/dist/components/ButtonLink.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { Children, useMemo } from 'react';
+import { useCitricController } from '../context/hooks.js';
+import { withRef } from '../utils/react.js';
+import { asCitricProps, CitricComponent } from './CitricComponent.js';
+/**
+ * Renders a link with the appearance of a button.
+ *
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <ButtonLink href="#">My Button Link</ButtonLink>
+ * ```
+ */
+export const ButtonLink = withRef(({ appearance, size, feedback, onClick, className, children, analytics, ...props }) => {
+    const citric = useCitricController();
+    const isAllLowercase = useMemo(() => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c), [children]);
+    const linkProps = {
+        component: 'button',
+        className: listToClass([size, appearance, isAllLowercase && 'short-text', className]),
+        onClick: (e) => {
+            onClick?.(e);
+            citric?.onClickLink?.(e, analytics ?? false);
+        },
+        'data-feedback': feedback || undefined,
+        ...props,
+    };
+    return citric?.renderLink
+        ? citric.renderLink(asCitricProps({ ...linkProps, children }))
+        : _jsx(CitricComponent, { tag: "a", ...linkProps, children: children });
+});
+//# sourceMappingURL=ButtonLink.js.map

package/dist/components/ButtonLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKlE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAChC,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB,EAClG,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,EACjG,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,cAAc,IAAI,YAAY,EAAE,SAAS,CAAC,CAAC;QACrF,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,CAAC;QACD,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,GAAG,KAAK;KACA,CAAA;IAEV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}

package/dist/components/Icon.d.ts

@@ -1,7 +1,10 @@
 import { IconGroup, IconProps as OgIconProps } from '@stack-spot/citric-icons';
 import { ColorKey } from '@stack-spot/portal-theme';
 export type IconProps<T extends IconGroup> = Omit<OgIconProps<T>, 'color'> & {
-    color: ColorKey;
+    /**
+     * The color for the icon. Can be any color in the theme.
+     */
+    color?: ColorKey;
 };
 /**
  * Renders an icon based on the properties "icon" and "group".

package/dist/components/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,SAAS,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC9F,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAGnD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,QAAQ,CAAA;CAAE,CAAA;AAEhG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAEjF"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,SAAS,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC9F,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAGnD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAEjF"}

package/dist/components/Icon.js

@@ -23,6 +23,6 @@ import { colorNameToColorVariable } from '../utils/css.js';
  * ```
  */
 export function Icon({ color, style, ...props }) {
-    return _jsx(OgIcon, { ...props, style: { color: colorNameToColorVariable(color), ...style } });
+    return _jsx(OgIcon, { ...props, style: { color: color ? colorNameToColorVariable(color) : undefined, ...style } });
 }
 //# sourceMappingURL=Icon.js.map

package/dist/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,IAAI,IAAI,MAAM,EAA4B,MAAM,0BAA0B,CAAA;AAE9F,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAIvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,IAAI,CAAsB,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAgB;IAChF,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,GAAI,CAAA;AAC3F,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,IAAI,IAAI,MAAM,EAA4B,MAAM,0BAA0B,CAAA;AAE9F,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AASvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,IAAI,CAAsB,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAgB;IAChF,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,KAAK,EAAE,GAAI,CAAA;AAC/G,CAAC"}

package/dist/components/Select/index.d.ts

@@ -7,7 +7,7 @@ export type * from './types.js';
  * The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
  * (accessibility).
  *
- * This Select is searchable! You just need to set `selectable = true`.
+ * This Select is searchable! You just need to set `searchable = true`.
  *
  * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
  *

package/dist/components/Select/index.js

@@ -9,7 +9,7 @@ import { SimpleSelect } from './SimpleSelect.js';
  * The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
  * (accessibility).
  *
- * This Select is searchable! You just need to set `selectable = true`.
+ * This Select is searchable! You just need to set `searchable = true`.
  *
  * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
  *

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Badge.js';
 export * from './components/Blockquote.js';
 export * from './components/Breadcrumb.js';
 export * from './components/Button.js';
+export * from './components/ButtonLink.js';
 export * from './components/Card.js';
 export * from './components/Checkbox.js';
 export * from './components/CheckboxGroup.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './components/Badge.js';
 export * from './components/Blockquote.js';
 export * from './components/Breadcrumb.js';
 export * from './components/Button.js';
+export * from './components/ButtonLink.js';
 export * from './components/Card.js';
 export * from './components/Checkbox.js';
 export * from './components/CheckboxGroup.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Button.tsx

@@ -56,7 +56,7 @@ export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'>
  * 
  * @example
  * ```
- * <Button>My Button</MyButton>
+ * <Button>My Button</Button>
  * ```
  */
 export const Button = withRef((

package/src/components/ButtonLink.tsx

@@ -0,0 +1,45 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { Children, useMemo } from 'react'
+import { useCitricController } from '../context/hooks'
+import { withRef } from '../utils/react'
+import { BaseButtonProps } from './Button'
+import { asCitricProps, CitricComponent } from './CitricComponent'
+
+export type BaseButtonLinkProps = Omit<BaseButtonProps, 'onClick' | 'loading' | 'type'>
+export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkProps
+
+/**
+ * Renders a link with the appearance of a button.
+ * 
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ * 
+ * @example
+ * ```
+ * <ButtonLink href="#">My Button Link</ButtonLink>
+ * ```
+ */
+export const ButtonLink = withRef((
+  { appearance, size, feedback, onClick, className, children, analytics, ...props }: ButtonLinkProps,
+) => {
+  const citric = useCitricController()
+  const isAllLowercase = useMemo(
+    () => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c),
+    [children],
+  )
+
+  const linkProps = {
+    component: 'button',
+    className: listToClass([size, appearance, isAllLowercase && 'short-text', className]),
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+      onClick?.(e)
+      citric?.onClickLink?.(e, analytics ?? false)
+    },
+    'data-feedback': feedback || undefined,
+    ...props,
+  } as const
+
+  return citric?.renderLink
+    ? citric.renderLink(asCitricProps({ ...linkProps, children }))
+    : <CitricComponent tag="a" {...linkProps}>{children}</CitricComponent>
+})

package/src/components/Icon.tsx

@@ -2,7 +2,12 @@ import { IconGroup, Icon as OgIcon, IconProps as OgIconProps } from '@stack-spot
 import { ColorKey } from '@stack-spot/portal-theme'
 import { colorNameToColorVariable } from '../utils/css'
 
-export type IconProps<T extends IconGroup> = Omit<OgIconProps<T>, 'color'> & { color: ColorKey }
+export type IconProps<T extends IconGroup> = Omit<OgIconProps<T>, 'color'> & {
+  /**
+   * The color for the icon. Can be any color in the theme.
+   */
+  color?: ColorKey,
+}
 
 /**
  * Renders an icon based on the properties "icon" and "group".
@@ -26,5 +31,5 @@ export type IconProps<T extends IconGroup> = Omit<OgIconProps<T>, 'color'> & { c
  * ```
  */
 export function Icon<T extends IconGroup>({ color, style, ...props }: IconProps<T>) {
-  return <OgIcon {...props} style={{ color: colorNameToColorVariable(color), ...style }} />
+  return <OgIcon {...props} style={{ color: color ? colorNameToColorVariable(color) : undefined, ...style }} />
 }

package/src/components/Select/index.tsx

@@ -11,7 +11,7 @@ export type * from './types'
  * The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
  * (accessibility).
  * 
- * This Select is searchable! You just need to set `selectable = true`.
+ * This Select is searchable! You just need to set `searchable = true`.
  * 
  * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
  * 

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './components/Badge'
 export * from './components/Blockquote'
 export * from './components/Breadcrumb'
 export * from './components/Button'
+export * from './components/ButtonLink'
 export * from './components/Card'
 export * from './components/Checkbox'
 export * from './components/CheckboxGroup'