@alveole/components 1.9.0 → 2.0.0-alpha

package/dist/ui/Header/Header.styles.js

@@ -1,7 +1,10 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, text, spacing, isVariant, shadows }) => ({
+export const useStyles = makeStyles(({ color, text, spacing, spacingValue, radius, isVariant, shadows }) => ({
     container: {
-        backgroundColor: isVariant('mobile') ? color.light.background['default-grey'] : color.light.background['alt-grey'],
+        // Barre blanche, séparée du contenu par la seule hairline : c'est ce que font Primer
+        // et Atlassian. Un fond gris sur une page blanche ajoute un second séparateur au
+        // filet, et écrase tout ce qu'on pose dessus.
+        backgroundColor: color.light.background['default-grey'],
         ...(isVariant('mobile')
             ? shadows('raised')
             : { borderBottomWidth: 1, borderBottomColor: color.light.border['default-grey'] }),
@@ -15,11 +18,10 @@ export const useStyles = makeStyles(({ color, text, spacing, isVariant, shadows
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
+        height: isVariant('mobile') ? spacingValue('8W') - spacingValue('1W') : spacingValue('8W'),
         gap: spacing('3W'),
         paddingLeft: spacing('2W'),
         paddingRight: spacing('2W'),
-        paddingTop: spacing('2W'),
-        paddingBottom: spacing('2W'),
     },
     identity: {
         display: 'flex',
@@ -27,8 +29,21 @@ export const useStyles = makeStyles(({ color, text, spacing, isVariant, shadows
         alignItems: 'center',
         gap: spacing('1W'),
     },
+    // Le lien d'identité est cliquable sans rien qui le dise : le lavis neutre au survol lui
+    // donne la même affordance qu'aux items de navigation. Le padding fait respirer le lavis
+    // autour du logo, sinon il colle au carré.
+    identityLink: {
+        paddingTop: spacingValue('1W'),
+        paddingBottom: spacingValue('1W'),
+        paddingLeft: spacingValue('1W'),
+        paddingRight: spacingValue('1W'),
+        borderRadius: radius('sm'),
+    },
+    identityLinkHover: {
+        backgroundColor: color.light.background['transparent-hover'],
+    },
     titleText: {
-        ...text['Corps de texte'].SM.Bold,
+        ...text['Corps de texte'].MD.Bold,
         color: color.light.text['title-grey'],
         display: isVariant('mobile') ? 'none' : 'flex',
     },

package/dist/ui/InputButtonAdornment/InputButtonAdornment.d.ts

@@ -1,6 +1,8 @@
-import { IconProps } from '@alveole/components';
+import { IconProps } from '../LucideIcon';
 export type InputButtonAdornmentProps = {
     icon: IconProps['name'];
+    /** Exige de l'appelant : accole a un champ, ce bouton n'a aucun texte a lui. */
+    accessibilityLabel: string;
     position: 'start' | 'end';
     disabled?: boolean;
     onPress?: () => void;

package/dist/ui/InputButtonAdornment/InputButtonAdornment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputButtonAdornment.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGjE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,gCAqBpE,CAAC"}
+{"version":3,"file":"InputButtonAdornment.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,gFAAgF;IAChF,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,gCAsBpE,CAAC"}

package/dist/ui/InputButtonAdornment/InputButtonAdornment.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, ButtonIcon } from '@alveole/components';
+import { Box } from '../../core/Box';
+import { ButtonIcon } from '../Button';
 import { useStyles } from './InputButtonAdornment.styles';
 export const InputButtonAdornment = (props) => {
-    const { icon, position, disabled, onPress } = props;
+    const { icon, accessibilityLabel, position, disabled, onPress } = props;
     const styles = useStyles();
     return (_jsx(Box, { style: position === 'start' ? styles.controlStart : styles.controlEnd, children: _jsx(ButtonIcon, { variant: "tertiary", disabled: disabled, style: {
                 borderBottomLeftRadius: 0,
                 borderBottomRightRadius: 0,
                 borderTopLeftRadius: 0,
                 borderTopRightRadius: 0,
-            }, icon: icon, onPress: onPress }) }));
+            }, icon: icon, accessibilityLabel: accessibilityLabel, onPress: onPress }) }));
 };

package/dist/ui/InputButtonAdornment/InputButtonAdornment.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { FormControl } from '../FormControl';
 import { InputButtonAdornment } from './InputButtonAdornment';
 import { useStyles } from './InputButtonAdornment.styles';
@@ -11,6 +11,6 @@ export default {
     component: InputButtonAdornment,
     styleFn: useStyles,
 };
-export const End = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "Eye", position: "end", onPress: () => { } }) }), _jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "X", position: "end", onPress: () => { } }) })] }));
-export const Start = () => (_jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "Plus", position: "start", onPress: () => { } }) }));
+export const End = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "Eye", position: "end", accessibilityLabel: "Afficher", onPress: () => { } }) }), _jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: "Effacer", onPress: () => { } }) })] }));
+export const Start = () => (_jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "Plus", position: "start", accessibilityLabel: "Ajouter", onPress: () => { } }) }));
 export * as Sources from './InputButtonAdornment.stories.sources';

package/dist/ui/InputButtonAdornment/InputButtonAdornment.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputButtonAdornment.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA6V,CAAC;AAE9W,eAAO,MAAM,KAAK,cAAgK,CAAC;AAEnL,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"InputButtonAdornment.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA4Z,CAAC;AAE7a,eAAO,MAAM,KAAK,cAA+L,CAAC;AAElN,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/InputButtonAdornment/InputButtonAdornment.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/InputButtonAdornment/InputButtonAdornment.stories.tsx
-export const End = () => "export const End = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl>\n      <InputButtonAdornment icon=\"Eye\" position=\"end\" onPress={() => {}} />\n    </FormControl>\n    <FormControl>\n      <InputButtonAdornment icon=\"X\" position=\"end\" onPress={() => {}} />\n    </FormControl>\n  </Box>\n);";
-export const Start = () => "export const Start = () => (\n  <FormControl>\n    <InputButtonAdornment icon=\"Plus\" position=\"start\" onPress={() => {}} />\n  </FormControl>\n);";
+export const End = () => "export const End = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl>\n      <InputButtonAdornment icon=\"Eye\" position=\"end\" accessibilityLabel=\"Afficher\" onPress={() => {}} />\n    </FormControl>\n    <FormControl>\n      <InputButtonAdornment icon=\"X\" position=\"end\" accessibilityLabel=\"Effacer\" onPress={() => {}} />\n    </FormControl>\n  </Box>\n);";
+export const Start = () => "export const Start = () => (\n  <FormControl>\n    <InputButtonAdornment icon=\"Plus\" position=\"start\" accessibilityLabel=\"Ajouter\" onPress={() => {}} />\n  </FormControl>\n);";
 export const storySources = {
     End,
     Start,

package/dist/ui/InputHeading/InputHeading.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { useStyles } from './InputHeading.styles';
 export const InputHeading = (props) => {
     const { children } = props;

package/dist/ui/InputHeading/InputHeading.styles.js

@@ -2,7 +2,7 @@ import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ spacing }) => ({
     inputHeading: {
         display: 'flex',
-        gap: spacing('025'),
+        gap: spacing('1V'),
         flexDirection: 'column',
     },
 }));

package/dist/ui/Leading/LeadingSlot.d.ts

@@ -0,0 +1,15 @@
+import { IconProps } from '../LucideIcon';
+import { Leading } from './leading';
+type LeadingSlotProps = {
+    contenu?: Leading;
+    /** Taille et couleur de l'icône ; seule la taille s'applique à un élément. */
+    apparence: Omit<IconProps, 'name'>;
+};
+/**
+ * Rend un contenu de tête ou de fin. Un élément est posé dans une boîte de la taille de
+ * l'icône, sans recevoir de couleur : un avatar ou un logo de marque garde la sienne. La boîte
+ * est décorative, comme l'icône : le nom accessible du composant reste son libellé.
+ */
+export declare const LeadingSlot: ({ contenu, apparence }: LeadingSlotProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=LeadingSlot.d.ts.map

package/dist/ui/Leading/LeadingSlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeadingSlot.d.ts","sourceRoot":"","sources":["../../../src/ui/Leading/LeadingSlot.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,EAAyC,MAAM,WAAW,CAAC;AAE3E,KAAK,gBAAgB,GAAG;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,wBAAwB,gBAAgB,uCAcnE,CAAC"}

package/dist/ui/Leading/LeadingSlot.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { LucideIcon } from '../LucideIcon';
+import { resoudreLeading, tailleDeLEmplacement } from './leading';
+/**
+ * Rend un contenu de tête ou de fin. Un élément est posé dans une boîte de la taille de
+ * l'icône, sans recevoir de couleur : un avatar ou un logo de marque garde la sienne. La boîte
+ * est décorative, comme l'icône : le nom accessible du composant reste son libellé.
+ */
+export const LeadingSlot = ({ contenu, apparence }) => {
+    const resolu = resoudreLeading(contenu);
+    if (!resolu)
+        return null;
+    if (resolu.type === 'icone')
+        return _jsx(LucideIcon, { name: resolu.nom, ...apparence });
+    const px = tailleDeLEmplacement(apparence.size);
+    return (_jsx(View, { "aria-hidden": true, style: { width: px, height: px, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }, children: resolu.element }));
+};

package/dist/ui/Leading/index.d.ts

@@ -0,0 +1,3 @@
+export * from './leading';
+export * from './LeadingSlot';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/Leading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Leading/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

package/dist/ui/Leading/index.js

@@ -0,0 +1,2 @@
+export * from './leading';
+export * from './LeadingSlot';

package/dist/ui/Leading/leading.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { IconName, IconProps } from '../LucideIcon';
+/**
+ * Le contenu de tête (ou de fin) d'un composant : le nom d'une icône, cas de neuf appels sur
+ * dix, ou un élément quelconque - avatar, logo de réseau social. `null` le retire, y compris
+ * quand le composant en pose un par défaut (voir ADR 0028).
+ */
+export type Leading = IconName | ReactElement | null;
+export type LeadingResolu = {
+    type: 'icone';
+    nom: IconName;
+} | {
+    type: 'element';
+    element: ReactElement;
+} | null;
+export declare const resoudreLeading: (leading: Leading | undefined) => LeadingResolu;
+/** La largeur de l'emplacement : celle de l'icône qu'il aurait reçue, pour que rien ne bouge. */
+export declare const tailleDeLEmplacement: (taille: IconProps["size"]) => number;
+//# sourceMappingURL=leading.d.ts.map

package/dist/ui/Leading/leading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"leading.d.ts","sourceRoot":"","sources":["../../../src/ui/Leading/leading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAmB,MAAM,eAAe,CAAC;AAErE;;;;GAIG;AACH,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,YAAY,CAAA;CAAE,GAAG,IAAI,CAAC;AAEjH,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAM9D,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,oBAAoB,GAAI,QAAQ,SAAS,CAAC,MAAM,CAAC,KAAG,MAAiC,CAAC"}

package/dist/ui/Leading/leading.js

@@ -0,0 +1,13 @@
+import { isValidElement } from 'react';
+import { tailleDesIcones } from '../LucideIcon';
+export const resoudreLeading = (leading) => {
+    if (leading == null)
+        return null;
+    if (typeof leading === 'string')
+        return { type: 'icone', nom: leading };
+    if (isValidElement(leading))
+        return { type: 'element', element: leading };
+    return null;
+};
+/** La largeur de l'emplacement : celle de l'icône qu'il aurait reçue, pour que rien ne bouge. */
+export const tailleDeLEmplacement = (taille) => tailleDesIcones[taille];

package/dist/ui/Link/Link.d.ts

@@ -0,0 +1,6 @@
+import { AProps } from '../../core/A';
+export type LinkProps = Pick<AProps, 'href' | 'target'> & {
+    children: string;
+};
+export declare const Link: ({ href, target, children }: LinkProps) => import("react").JSX.Element;
+//# sourceMappingURL=Link.d.ts.map

package/dist/ui/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAqC,MAAM,cAAc,CAAC;AAKzE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,IAAI,GAAI,4BAA4B,SAAS,gCAkCzD,CAAC"}

package/dist/ui/Link/Link.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { linkProps } from '@alveole/theme';
+import { Link as ExpoLink } from 'expo-router';
+import { ouvertureDuLien, useCanAccessHref } from '../../core/A';
+import { Typography } from '../../core/Typography';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './Link.styles';
+export const Link = ({ href, target, children }) => {
+    const styles = useStyles();
+    const canAccess = useCanAccessHref();
+    const { navigateurIntegre, nouvelOnglet, propsDuPressable, annonce } = ouvertureDuLien(href, target);
+    if (!canAccess(href))
+        return _jsx(_Fragment, { children: children });
+    const lien = (_jsxs(Typography, { tag: "a", accessibilityRole: "link", style: styles.link, hoverStyle: styles.linkHover, ...propsDuPressable, ...linkProps(), children: [children, nouvelOnglet && (_jsxs(_Fragment, { children: [' ', _jsx(LucideIcon, { name: "ExternalLink", size: "xs", color: styles.link.color, style: styles.icone })] })), annonce] }));
+    if (navigateurIntegre)
+        return lien;
+    return (_jsx(ExpoLink, { href: href, asChild: true, children: lien }));
+};

package/dist/ui/Link/Link.stories.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    shortDescription: string;
+    component: ({ href, target, children }: import("./Link").LinkProps) => import("react").JSX.Element;
+    styleFn: () => {
+        link: {
+            color: string;
+            textDecoration: string;
+        };
+        linkHover: {
+            textDecoration: string;
+        };
+        icone: {
+            verticalAlign: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const DansUnePhrase: () => import("react").JSX.Element;
+export declare const LienExterne: () => import("react").JSX.Element;
+export * as Sources from './Link.stories.sources';
+//# sourceMappingURL=Link.stories.d.ts.map

package/dist/ui/Link/Link.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,wBAckB;AAElB,eAAO,MAAM,OAAO,mCAA+D,CAAC;AAEpF,eAAO,MAAM,aAAa,mCAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Link/Link.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '../../core/Typography';
+import { Link } from './Link';
+import { useStyles } from './Link.styles';
+export default {
+    title: 'Link',
+    tags: ['ui'],
+    experimental: false,
+    description: `Lien de texte stylé : souligné, dans la couleur d'action, le soulignement disparaît au survol.
+
+À utiliser dans une phrase ou à côté d'un texte : il reste en ligne avec le texte qui l'entoure.
+
+Avec \`target="_blank"\`, c'est un lien externe : il s'ouvre dans un nouvel onglet sur le web, dans le navigateur intégré sur mobile, et affiche une icône qui le signale.
+
+Pour rendre cliquable un bloc (carte, ligne de liste), utiliser \`A\`.`,
+    shortDescription: "Lien de texte souligné, à utiliser dans ou à côté d'un texte.",
+    component: Link,
+    styleFn: useStyles,
+};
+export const Default = () => _jsx(Link, { href: '/ui-kit/components/Link', children: "Mon lien" });
+export const DansUnePhrase = () => (_jsxs(Typography, { children: ["Consultez ", _jsx(Link, { href: '/ui-kit/components/Link', children: "la documentation" }), " avant de commencer."] }));
+export const LienExterne = () => (_jsx(Link, { href: "https://www.captive.fr", target: "_blank", children: "Site de Captive" }));
+export * as Sources from './Link.stories.sources';

package/dist/ui/Link/Link.stories.sources.d.ts

@@ -0,0 +1,10 @@
+export declare const Default: () => string;
+export declare const DansUnePhrase: () => string;
+export declare const LienExterne: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly DansUnePhrase: () => string;
+    readonly LienExterne: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Link.stories.sources.d.ts.map

package/dist/ui/Link/Link.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+F,CAAC;AAEpH,eAAO,MAAM,aAAa,cAAsL,CAAC;AAEjN,eAAO,MAAM,WAAW,cAA6I,CAAC;AAEtK,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Link/Link.stories.sources.js

@@ -0,0 +1,10 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Link/Link.stories.tsx
+export const Default = () => "export const Default = () => <Link href={'/ui-kit/components/Link'}>Mon lien</Link>;";
+export const DansUnePhrase = () => "export const DansUnePhrase = () => (\n  <Typography>\n    Consultez <Link href={'/ui-kit/components/Link'}>la documentation</Link> avant de commencer.\n  </Typography>\n);";
+export const LienExterne = () => "export const LienExterne = () => (\n  <Link href=\"https://www.captive.fr\" target=\"_blank\">\n    Site de Captive\n  </Link>\n);";
+export const storySources = {
+    Default,
+    DansUnePhrase,
+    LienExterne,
+};

package/dist/ui/Link/Link.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const useStyles: () => {
+    link: {
+        color: string;
+        textDecoration: string;
+    };
+    linkHover: {
+        textDecoration: string;
+    };
+    icone: {
+        verticalAlign: string;
+    };
+};
+//# sourceMappingURL=Link.styles.d.ts.map

package/dist/ui/Link/Link.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;CAWnB,CAAC"}

package/dist/ui/Link/Link.styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color }) => ({
+    link: {
+        color: color.light.text['action-high-info'],
+        textDecoration: 'underline',
+    },
+    linkHover: {
+        textDecoration: 'none',
+    },
+    icone: {
+        verticalAlign: 'middle',
+    },
+}));

package/dist/ui/Link/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Link';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/Link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/ui/Link/index.js

@@ -0,0 +1 @@
+export * from './Link';

package/dist/ui/ListItem/ListItem.d.ts

@@ -1,20 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../../core';
-import { AvatarProps } from '../Avatar';
-import { IconProps } from '../LucideIcon';
-import { RadioInputProps } from '../RadioGroup';
-export type ListItemProps = BoxProps & {
-    title: string;
-    description?: string;
-    IconProps?: Pick<IconProps, 'color' | 'name'>;
-    AvatarProps?: Pick<AvatarProps, 'fallbackText' | 'src'>;
-    RadioProps?: Pick<RadioInputProps, 'checked' | 'onChange' | 'value'> & {
-        multiple?: boolean;
-    };
-    preview_url?: string;
-    trailing?: () => React.ReactNode;
-    loading?: boolean;
-    showSeparateur?: boolean;
-};
+import { ListItemProps } from './ListItem.types';
+export * from './ListItem.types';
 export declare const ListItem: (props: ListItemProps) => React.JSX.Element;
 //# sourceMappingURL=ListItem.d.ts.map

package/dist/ui/ListItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAqB,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AACtD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,KAAK,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC9F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBA4G5C,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,cAAc,kBAAkB,CAAC;AAEjC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAiE5C,CAAC"}

package/dist/ui/ListItem/ListItem.js

@@ -1,23 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Image, Typography } from '../../core';
-import { Avatar } from '../Avatar';
-import { CheckboxContainer, CheckboxIndicator } from '../Checkbox';
-import { LucideIcon } from '../LucideIcon';
-import { RadioGroup } from '../RadioGroup';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Spinner } from '../Spinner';
 import { useStyles } from './ListItem.styles';
+import { ListItemVisuel } from './ListItemVisuel';
+export * from './ListItem.types';
 export const ListItem = (props) => {
     const { children, title, description, style, AvatarProps, IconProps, RadioProps, preview_url, trailing, loading = false, showSeparateur = true, onPress, ...itemProps } = props;
+    // Presser la ligne vaut choix : c'est toute la ligne qui est la cible, pas le seul controle.
     const handlePress = React.useCallback((event) => {
         if (RadioProps)
             RadioProps.onChange?.(RadioProps.value);
         onPress?.(event);
     }, [RadioProps, onPress]);
     const styles = useStyles();
-    return (_jsxs(Box, { children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, style], hoverStyle: onPress || RadioProps ? styles.itemHover : {}, onPress: handlePress, ...itemProps, children: [preview_url ? (_jsx(Box, { style: styles.previewContainer, children: _jsx(Image, { source: { uri: preview_url }, width: styles.preview.width, height: styles.preview.height, contentFit: "contain" }) })) : (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '3V', children: [RadioProps && RadioProps.multiple !== true && (_jsx(Box, { mt: 'auto', mb: 'auto', onPress: event => {
-                                    event.stopPropagation();
-                                }, children: _jsx(RadioGroup.Input, { id: `${title}--radio`, size: "md", ...RadioProps }) })), RadioProps && RadioProps.multiple === true && (_jsx(Box, { mt: 'auto', mb: 'auto', onPress: event => {
-                                    event.stopPropagation();
-                                }, children: _jsx(CheckboxContainer, { id: `${title}--checkbox`, checked: RadioProps.checked, onCheckedChange: () => RadioProps.onChange?.(RadioProps.value), children: _jsx(CheckboxIndicator, {}) }) })), IconProps && (_jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(LucideIcon, { size: "sm", color: styles.defaultIcon.color, ...IconProps }) })), AvatarProps && (_jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(Avatar, { size: "xs", ...AvatarProps }) }))] })), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
+    return (_jsxs(Box, { style: styles.container, children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, style], hoverStyle: onPress || RadioProps ? styles.itemHover : {}, onPress: handlePress, ...itemProps, children: [_jsx(ListItemVisuel, { title: title, preview_url: preview_url, RadioProps: RadioProps, IconProps: IconProps, AvatarProps: AvatarProps }), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
 };

package/dist/ui/ListItem/ListItem.stories.d.ts

@@ -5,26 +5,21 @@ declare const _default: {
     figmaURL: string;
     shortDescription: string;
     description: string;
-    component: (props: import("./ListItem").ListItemProps) => import("react").JSX.Element;
+    component: (props: import("./ListItem.types").ListItemProps) => import("react").JSX.Element;
     styleFn: () => {
-        item: {
+        defaultIcon: {
+            color: string;
+        };
+        previewContainer: {
             display: "flex";
-            flexDirection: "row";
-            paddingLeft: string | number;
-            paddingRight: string | number;
             alignItems: "center";
-            gap: string | number;
-            alignSelf: "stretch";
-        };
-        itemHover: {
-            backgroundColor: string;
-            borderRadius: import("@alveole/theme").Radius;
-            cursor: "pointer";
+            justifyContent: "center";
+            overflow: "hidden";
+            borderRadius: string | number;
         };
-        container: {
-            display: "flex";
-            flexDirection: "row";
-            gap: string | number;
+        preview: {
+            width: number;
+            height: number;
         };
         detail: {
             paddingTop: string | number;
@@ -68,32 +63,28 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
             color: string;
         };
-        additional: {};
-        trailing: {
-            display: "flex";
-            justifyContent: "center";
-            alignSelf: "stretch";
-            color: string;
+        container: {
+            width: "100%";
         };
-        loading: {
+        item: {
             display: "flex";
+            flexDirection: "row";
+            paddingLeft: string | number;
+            paddingRight: string | number;
             alignItems: "center";
-            justifyContent: "center";
-            color: string;
+            gap: string | number;
+            alignSelf: "stretch";
         };
-        defaultIcon: {
-            color: string;
+        itemHover: {
+            backgroundColor: string;
+            borderRadius: import("@alveole/theme").Radius;
+            cursor: "pointer";
         };
-        previewContainer: {
+        loading: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            overflow: "hidden";
-            borderRadius: string | number;
-        };
-        preview: {
-            width: number;
-            height: number;
+            color: string;
         };
     };
 };

package/dist/ui/ListItem/ListItem.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCASxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/ListItem/ListItem.stories.js

@@ -18,7 +18,7 @@ Il est recommandé d’utiliser les \`ListItem\` au sein d’une [ResourceList](
 export const Default = () => (_jsx(ListItem, { title: "Titre", description: "Description", onPress: () => {
         window.alert('click !');
     } }));
-export const WithTrailing = () => (_jsx(ListItem, { title: "Titre", description: "Description", trailing: () => _jsx(ButtonIcon, { variant: "tertiary", icon: "CircleX", onPress: () => console.log('remove') }), onPress: () => {
+export const WithTrailing = () => (_jsx(ListItem, { title: "Titre", description: "Description", trailing: () => (_jsx(ButtonIcon, { variant: "tertiary", icon: "CircleX", accessibilityLabel: "Retirer", onPress: () => console.log('remove') })), onPress: () => {
         window.alert('click !');
     } }));
 /**

package/dist/ui/ListItem/ListItem.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAoL,CAAC;AAEzM,eAAO,MAAM,YAAY,cAA0S,CAAC;AAEpU,eAAO,MAAM,WAAW,cAA4M,CAAC;AAErO,eAAO,MAAM,gBAAgB,cAAyN,CAAC;AAEvP,eAAO,MAAM,QAAQ,cAA6O,CAAC;AAEnQ,eAAO,MAAM,UAAU,cAAyU,CAAC;AAEjW,eAAO,MAAM,gBAAgB,cAAqR,CAAC;AAEnT,eAAO,MAAM,SAAS,cAAqU,CAAC;AAE5V,eAAO,MAAM,iBAAiB,cAAsW,CAAC;AAErY,eAAO,MAAM,iBAAiB,cAAqX,CAAC;AAEpZ,eAAO,MAAM,YAAY,cAAsG,CAAC;AAEhI,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
+{"version":3,"file":"ListItem.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAoL,CAAC;AAEzM,eAAO,MAAM,YAAY,cAAoY,CAAC;AAE9Z,eAAO,MAAM,WAAW,cAA4M,CAAC;AAErO,eAAO,MAAM,gBAAgB,cAAyN,CAAC;AAEvP,eAAO,MAAM,QAAQ,cAA6O,CAAC;AAEnQ,eAAO,MAAM,UAAU,cAAyU,CAAC;AAEjW,eAAO,MAAM,gBAAgB,cAAqR,CAAC;AAEnT,eAAO,MAAM,SAAS,cAAqU,CAAC;AAE5V,eAAO,MAAM,iBAAiB,cAAsW,CAAC;AAErY,eAAO,MAAM,iBAAiB,cAAqX,CAAC;AAEpZ,eAAO,MAAM,YAAY,cAAsG,CAAC;AAEhI,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}

package/dist/ui/ListItem/ListItem.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/ListItem/ListItem.stories.tsx
 export const Default = () => "export const Default = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
-export const WithTrailing = () => "export const WithTrailing = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    trailing={() => <ButtonIcon variant=\"tertiary\" icon=\"CircleX\" onPress={() => console.log('remove')} />}\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
+export const WithTrailing = () => "export const WithTrailing = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    trailing={() => (\n      <ButtonIcon\n        variant=\"tertiary\"\n        icon=\"CircleX\"\n        accessibilityLabel=\"Retirer\"\n        onPress={() => console.log('remove')}\n      />\n    )}\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
 export const WithLoading = () => "export const WithLoading = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    loading={true}\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
 export const WithoutSeparator = () => "export const WithoutSeparator = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    showSeparateur={false}\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
 export const WithIcon = () => "export const WithIcon = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    IconProps={{ name: 'Settings', color: 'primary' }}\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";