@infonomic/uikit 5.9.0 → 5.10.0

package/src/components/chips/chip.module.css

@@ -0,0 +1,425 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  .chip,
+  :global(.chip) {
+    --chip-border: var(--surface-panel-border);
+    --chip-font-size: 0.9rem;
+    --chip-height: 34px;
+    --chip-padding-y: 0.35rem;
+    --chip-padding-x: 0.4rem;
+    --chip-icon-size: 1rem;
+
+    appearance: none;
+    border: 1px solid var(--chip-border);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-1);
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    line-height: 1.1;
+    font-weight: 500;
+    text-decoration: none;
+    min-height: var(--chip-height);
+    padding: var(--chip-padding-y) var(--chip-padding-x);
+    font-size: var(--chip-font-size);
+    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+  }
+
+  .chip:disabled,
+  .chip[disabled],
+  :global(.chip):disabled,
+  :global(.chip)[disabled] {
+    pointer-events: none;
+  }
+
+  .chip:focus,
+  .chip:active,
+  :global(.chip):focus,
+  :global(.chip):active {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .icon {
+    width: var(--chip-icon-size);
+    height: var(--chip-icon-size);
+  }
+
+  .end-icon {
+    margin-left: 0.3rem;
+  }
+
+  .iconWrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .remove {
+    width: calc(var(--chip-icon-size) * 0.85);
+    height: calc(var(--chip-icon-size) * 0.85);
+    min-height: calc(var(--chip-icon-size) * 0.85);
+  }
+
+  /* Sizes ----------------------------------------------------------- */
+  .xs,
+  :global(.chip-xs) {
+    --chip-height: 24px;
+    --chip-padding-y: 0.15rem;
+    --chip-padding-x: 0.3rem;
+    --chip-font-size: 0.75rem;
+    --chip-icon-size: 1rem;
+    gap: var(--gap-1);
+  }
+
+  .sm,
+  :global(.chip-sm) {
+    --chip-height: 28px;
+    --chip-padding-y: 0.2rem;
+    --chip-padding-x: 0.4rem;
+    --chip-font-size: 0.82rem;
+    --chip-icon-size: 1.2rem;
+  }
+
+  .md,
+  :global(.chip-md) {
+    --chip-height: 32px;
+    --chip-padding-y: 0.25rem;
+    --chip-padding-x: 0.5rem;
+    --chip-font-size: 0.9rem;
+    --chip-icon-size: 1.3rem;
+  }
+
+  .lg,
+  :global(.chip-lg) {
+    --chip-height: 36px;
+    --chip-padding-y: 0.3rem;
+    --chip-padding-x: 0.6rem;
+    --chip-font-size: 0.98rem;
+    --chip-icon-size: 1.35rem;
+  }
+
+  .xl,
+  :global(.chip-xl) {
+    --chip-height: 40px;
+    --chip-padding-y: 0.3rem;
+    --chip-padding-x: 0.7rem;
+    --chip-font-size: 1rem;
+    --chip-icon-size: 1.4rem;
+  }
+
+  /* Variants -------------------------------------------------------- */
+  /* Variants - Consuming Variables */
+  .filled,
+  :global(.chip-filled) {
+    color: var(--chip-variant-filled-foreground);
+    background-color: var(--chip-variant-filled);
+  }
+
+  .filled:hover,
+  :global(.chip-filled):hover {
+    background-color: var(--chip-variant-filled-hover);
+  }
+
+  .filled:focus,
+  .filled:active,
+  :global(.chip-filled):focus,
+  :global(.chip-filled):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  .filled:disabled,
+  .filled[disabled],
+  :global(.chip-filled):disabled,
+  :global(.chip-filled)[disabled] {
+    background-color: var(--chip-variant-filled-disabled, oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--chip-variant-filled-foreground-disabled, oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
+  /* -------------------------------------------------------- */
+  /* Weak variant for close button on selected chip */
+
+  .filled-weak,
+  :global(.chip-filled) {
+    color: var(--chip-variant-filled-weak-foreground);
+    background-color: var(--chip-variant-filled-weak);
+  }
+
+  .filled-weak:hover,
+  :global(.chip-filled):hover {
+    background-color: var(--chip-variant-filled-weak-hover);
+  }
+
+  .filled-weak:focus,
+  .filled-weak:active,
+  :global(.chip-filled):focus,
+  :global(.chip-filled):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  .filled-weak:disabled,
+  .filled[disabled],
+  :global(.chip-filled):disabled,
+  :global(.chip-filled)[disabled] {
+    background-color: var(--chip-variant-filled-weak-disabled, oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--chip-variant-filled-weak-foreground-disabled, oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
+  /* -------------------------------------------------------- */
+  /* Outlined variant */
+
+  .outlined,
+  :global(.chip-outlined) {
+    border: 1px solid var(--chip-variant-outlined-border);
+    color: var(--chip-variant-outlined-foreground);
+    background-color: var(--chip-variant-outlined);
+  }
+
+  .outlined:disabled,
+  .outlined[disabled],
+  :global(.chip-outlined):disabled,
+  :global(.chip-outlined)[disabled] {
+    border-color: var(--chip-variant-outlined-border-disabled, oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
+    color: var(--chip-variant-outlined-foreground-disabled, oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+  }
+
+  .outlined:hover,
+  :global(.chip-outlined):hover {
+    background-color: var(--chip-variant-outlined-hover);
+  }
+
+  .outlined:focus,
+  .outlined:active,
+  :global(.chip-outlined):focus,
+  :global(.chip-outlined):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  .text,
+  :global(.chip-text) {
+    background-color: var(--chip-variant-text);
+    color: var(--chip-variant-text-foreground);
+  }
+
+  .text:disabled,
+  .text[disabled],
+  :global(.chip-text):disabled,
+  :global(.chip-text)[disabled] {
+    color: oklch(from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
+  }
+
+  .text:hover,
+  :global(.chip-text):hover {
+    background-color: var(--chip-variant-text-hover);
+  }
+
+  .text:focus,
+  .text:active,
+  :global(.chip-text):focus,
+  :global(.chip-text):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  /* Intents - Defining Variables */
+  .primary,
+  :global(.chip-primary) {
+    --chip-ring-color: var(--ring-primary);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-primary-strong);
+    --chip-variant-filled-foreground: var(--text-on-primary);
+    --chip-variant-filled-hover: var(--fill-primary-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-primary-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-primary-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-primary);
+    --chip-variant-filled-weak-hover: var(--fill-primary-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-primary-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-primary-strong);
+    --chip-variant-outlined-hover: var(--fill-primary-weak);
+    --chip-variant-outlined-border: var(--stroke-primary);
+    --chip-variant-outlined-border-disabled: var(--stroke-primary-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-primary-disabled);
+  }
+
+  .secondary,
+  :global(.chip-secondary) {
+    --chip-ring-color: var(--ring-secondary);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-secondary-strong);
+    --chip-variant-filled-foreground: var(--text-on-secondary);
+    --chip-variant-filled-hover: var(--fill-secondary-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-secondary-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-secondary-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-secondary);
+    --chip-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-disabled);
+
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-secondary-strong);
+    --chip-variant-outlined-hover: var(--fill-secondary-weak);
+    --chip-variant-outlined-border: var(--stroke-secondary);
+    --chip-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
+  }
+
+  .noeffect,
+  :global(.chip-noeffect) {
+    --chip-ring-color: var(--ring-noeffect);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-noeffect-strong);
+    --chip-variant-filled-foreground: var(--text-on-noeffect);
+    --chip-variant-filled-hover: var(--fill-noeffect-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-noeffect-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-noeffect);
+    --chip-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-noeffect-strong);
+    --chip-variant-outlined-hover: var(--fill-noeffect-weak);
+    --chip-variant-outlined-border: var(--stroke-noeffect);
+    --chip-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
+  }
+
+  .success,
+  :global(.chip-success) {
+    --chip-ring-color: var(--ring-success);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-success-strong);
+    --chip-variant-filled-foreground: var(--text-on-success);
+    --chip-variant-filled-hover: var(--fill-success-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-success-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-success-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-success-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-success);
+    --chip-variant-filled-weak-hover: var(--fill-success-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-disabled);
+
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-success-strong);
+    --chip-variant-outlined-hover: var(--fill-success-weak);
+    --chip-variant-outlined-border: var(--stroke-success);
+    --chip-variant-outlined-border-disabled: var(--stroke-success-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-success-disabled);
+  }
+
+  .info,
+  :global(.chip-info) {
+    --chip-ring-color: var(--ring-info);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-info-strong);
+    --chip-variant-filled-foreground: var(--text-on-info);
+    --chip-variant-filled-hover: var(--fill-info-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-info-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-info-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-info-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-info);
+    --chip-variant-filled-weak-hover: var(--fill-info-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-info-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-info-strong);
+    --chip-variant-outlined-hover: var(--fill-info-weak);
+    --chip-variant-outlined-border: var(--stroke-info);
+    --chip-variant-outlined-border-disabled: var(--stroke-info-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-info-disabled);
+  }
+
+  .warning,
+  :global(.chip-warning) {
+    --chip-ring-color: var(--ring-warning);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-warning-strong);
+    --chip-variant-filled-foreground: var(--text-on-warning);
+    --chip-variant-filled-hover: var(--fill-warning-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-warning-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-warning-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-warning);
+    --chip-variant-filled-weak-hover: var(--fill-warning-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-warning-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-warning-strong);
+    --chip-variant-outlined-hover: var(--fill-warning-weak);
+    --chip-variant-outlined-border: var(--stroke-warning);
+    --chip-variant-outlined-border-disabled: var(--stroke-warning-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-warning-disabled);
+  }
+
+  .danger,
+  :global(.chip-danger) {
+    --chip-ring-color: var(--ring-danger);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-danger-strong);
+    --chip-variant-filled-foreground: var(--text-on-danger);
+    --chip-variant-filled-hover: var(--fill-danger-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-danger-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-danger-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-danger);
+    --chip-variant-filled-weak-hover: var(--fill-danger-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-danger-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-danger-strong);
+    --chip-variant-outlined-hover: var(--fill-danger-weak);
+    --chip-variant-outlined-border: var(--stroke-danger);
+    --chip-variant-outlined-border-disabled: var(--stroke-danger-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-danger-disabled);
+  }
+}

package/src/components/chips/chip.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { capitalize } from '../../utils/capitalize.js'
+import { intent, size } from '../@types/shared.js'
+import { CalendarIcon } from '../../icons/calendar-icon.js'
+import { Chip } from './chip.js'
+import { chipVariant } from './@types/chip.js'
+
+type Story = StoryObj<typeof Chip>
+
+const Row = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>{children}</div>
+)
+
+export const Intents: Story = {
+  render: () => (
+     <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        {intent.map((i) => (
+          <Row key={i}>
+            <Chip intent={i}>{capitalize(i)} chip</Chip>
+            <Chip intent={i} variant="selectable" selected>
+              {capitalize(i)} selectable
+            </Chip>
+          </Row>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+     <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <Row>
+        {size.map((s) => (
+          <Chip variant={"selectable-removable"} selected={true} key={s} size={s}>{`Size ${s}`}</Chip>
+        ))}
+      </Row>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        {chipVariant.map((variant) => (
+          <Row key={variant}>
+            <Chip variant={variant}>{capitalize(variant)} chip</Chip>
+            <Chip variant={variant} startIcon={<CalendarIcon height="16px" width="16px" />} selected={true}>{`${capitalize(variant)} with icon`}</Chip>
+            {(variant === 'removable' || variant === 'selectable-removable') && (
+              <Chip variant={variant} onRemove={() => {}}>
+                {`${capitalize(variant)} with remove`}
+              </Chip>
+            )}
+          </Row>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const Selectable: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(false)
+    return (
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+        <Row>
+          <Chip
+            variant="selectable"
+            intent="primary"
+            size="sm"
+            selected={selected}
+            onToggle={(next: boolean) => setSelected(next)}
+          >
+            Toggle me
+          </Chip>
+        </Row>
+      </div>
+    )
+  },
+}
+
+export const Removable: Story = {
+  render: () => (
+     <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
+      <Row>
+        <Chip
+          variant="removable"
+          intent="primary"
+          onRemove={() => {}}
+          startIcon={<CalendarIcon height="16px" width="16px" />}
+        >
+          Removable chip
+        </Chip>
+      </Row>
+    </div>
+  ),
+}
+
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+}
+
+export default meta