@memori.ai/ui 1.0.0-alpha

package/src/components/Expandable/__snapshots__/Expandable.test.tsx.snap

@@ -0,0 +1,199 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Expandable unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with JSX markup unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 16px;"
+    >
+      <h1>
+        Lorem ipsum
+      </h1>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <h2>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </h2>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <button>
+        Dolor sit amet
+      </button>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded"
+    >
+      ...
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom button CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 16px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded test"
+    >
+      ...
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom collapse symbol unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded"
+    >
+      test collapse
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom expand symbol unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 16px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded"
+    >
+      test
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom inner CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner test"
+      style="max-height: 16px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded"
+    >
+      ...
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom wrapper CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable test"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 16px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded"
+    >
+      ...
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with long text unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 16px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded"
+    >
+      ...
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with multiple rows unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 48px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+    <button
+      class="memori-button memori-button--ghost memori-button--rounded"
+    >
+      ...
+    </button>
+  </div>
+</div>
+`;

package/src/components/Expandable/helpers.ts

@@ -0,0 +1,16 @@
+export const MAX_MSG_CHARS = 4000
+export const MAX_MSG_WORDS = 300
+
+export const truncateMessage = (message: string) => {
+  let truncatedMessage = message
+  if (message.length > MAX_MSG_CHARS) {
+    truncatedMessage = `${message.slice(0, MAX_MSG_CHARS)}\n<br />...`
+  }
+  if (truncatedMessage.split(' ').length > MAX_MSG_WORDS) {
+    truncatedMessage = truncatedMessage
+      .split(' ')
+      .slice(0, MAX_MSG_WORDS)
+      .join(' ')
+  }
+  return truncatedMessage
+}

package/src/components/Expandable/index.tsx

@@ -0,0 +1,2 @@
+import Expandable from './Expandable'
+export { Expandable }

package/src/components/InputBase/InputBase.stories.tsx

@@ -0,0 +1,237 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { InputBase } from './InputBase'
+import { fn } from 'storybook/test'
+
+const meta = {
+  title: 'UI/InputBase',
+  component: InputBase,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'error', 'disabled'],
+      description: 'Input variant style',
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'md', 'lg'],
+      description: 'Input size',
+    },
+    fullWidth: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether the input should take full width',
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether the input is disabled',
+    },
+    placeholder: {
+      control: {
+        type: 'text',
+      },
+      description: 'Placeholder text',
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+      description: 'Input value (controlled)',
+    },
+    defaultValue: {
+      control: {
+        type: 'text',
+      },
+      description: 'Default value (uncontrolled)',
+    },
+    type: {
+      control: {
+        type: 'text',
+      },
+      description: 'Input type',
+    },
+    onValueChange: {
+      description: 'Callback fired when the value changes',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    onValueChange: fn(),
+  },
+} satisfies Meta<typeof InputBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default input variant with standard styling.
+ */
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+    variant: 'default',
+  },
+}
+
+/**
+ * Error variant indicates validation errors.
+ */
+export const Error: Story = {
+  args: {
+    placeholder: 'This field has an error',
+    variant: 'error',
+    defaultValue: 'Invalid input',
+  },
+}
+
+/**
+ * Disabled input state.
+ */
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input',
+    variant: 'disabled',
+    defaultValue: 'Cannot edit',
+  },
+}
+
+/**
+ * Small size input.
+ */
+export const Small: Story = {
+  args: {
+    placeholder: 'Small input',
+    variant: 'default',
+    size: 'sm',
+  },
+}
+
+/**
+ * Medium size input (default).
+ */
+export const Medium: Story = {
+  args: {
+    placeholder: 'Medium input',
+    variant: 'default',
+    size: 'md',
+  },
+}
+
+/**
+ * Large size input.
+ */
+export const Large: Story = {
+  args: {
+    placeholder: 'Large input',
+    variant: 'default',
+    size: 'lg',
+  },
+}
+
+/**
+ * Full width input.
+ */
+export const FullWidth: Story = {
+  args: {
+    placeholder: 'Full width input',
+    variant: 'default',
+    fullWidth: true,
+  },
+}
+
+/**
+ * Controlled input example.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('')
+    return (
+      <InputBase
+        value={value}
+        onValueChange={setValue}
+        placeholder="Type something..."
+      />
+    )
+  },
+}
+
+/**
+ * Different input types.
+ */
+export const InputTypes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <InputBase
+        type="text"
+        placeholder="Text input"
+      />
+      <InputBase
+        type="email"
+        placeholder="Email input"
+      />
+      <InputBase
+        type="password"
+        placeholder="Password input"
+      />
+      <InputBase
+        type="number"
+        placeholder="Number input"
+      />
+    </div>
+  ),
+}
+
+/**
+ * All variants displayed together for comparison.
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <InputBase
+        placeholder="Default variant"
+        variant="default"
+      />
+      <InputBase
+        placeholder="Error variant"
+        variant="error"
+      />
+      <InputBase
+        placeholder="Disabled variant"
+        variant="disabled"
+      />
+    </div>
+  ),
+}
+
+/**
+ * All sizes displayed together for comparison.
+ */
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <InputBase
+        placeholder="Small input"
+        size="sm"
+      />
+      <InputBase
+        placeholder="Medium input"
+        size="md"
+      />
+      <InputBase
+        placeholder="Large input"
+        size="lg"
+      />
+    </div>
+  ),
+}

package/src/components/InputBase/InputBase.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { Input as BaseInput } from '@base-ui/react/input'
+import type { InputProps as BaseInputProps } from '@base-ui/react/input'
+import cx from 'classnames'
+import styles from './styles.module.css'
+
+export interface InputBaseProps
+  extends Omit<BaseInputProps, 'className' | 'size'> {
+  /**
+   * Input variant
+   * @default 'default'
+   */
+  variant?: 'default' | 'error' | 'disabled'
+  /**
+   * Input size
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg'
+  /**
+   * Whether the input should take full width
+   */
+  fullWidth?: boolean
+  /**
+   * Additional CSS class name
+   */
+  className?: string
+  /**
+   * Placeholder text
+   */
+  placeholder?: string
+  /**
+   * Input value
+   */
+  value?: string
+  /**
+   * Default value for uncontrolled input
+   */
+  defaultValue?: string
+  /**
+   * Callback fired when the value changes
+   */
+  onValueChange?: (value: string) => void
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean
+  /**
+   * Input type
+   * @default 'text'
+   */
+  type?: string
+}
+
+export const InputBase = React.forwardRef<HTMLInputElement, InputBaseProps>(
+  (
+    {
+      variant = 'default',
+      size = 'md',
+      fullWidth = false,
+      className,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const isDisabled = disabled || variant === 'disabled'
+
+    const variantClass =
+      variant === 'error'
+        ? styles['input--error']
+        : variant === 'disabled'
+          ? styles['input--disabled']
+          : styles['input--default']
+
+    const sizeClass =
+      size === 'sm'
+        ? styles['input--sm']
+        : size === 'lg'
+          ? styles['input--lg']
+          : styles['input--md']
+
+    const fullWidthClass = fullWidth ? styles['input--full-width'] : undefined
+    const disabledClass = isDisabled ? styles['input--disabled'] : undefined
+
+    return (
+      <BaseInput
+        ref={ref}
+        disabled={isDisabled}
+        className={cx(
+          styles.input,
+          variantClass,
+          sizeClass,
+          fullWidthClass,
+          disabledClass,
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+
+InputBase.displayName = 'InputBase'
+
+export default InputBase

package/src/components/InputBase/index.tsx

@@ -0,0 +1,3 @@
+export { InputBase } from './InputBase'
+export type { InputBaseProps } from './InputBase'
+export { InputBase as default } from './InputBase'

package/src/components/InputBase/styles.module.css

@@ -0,0 +1,96 @@
+.input {
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--color-neutral-400);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-neutral-white);
+    color: var(--color-neutral-800);
+    font-family: var(--typography-font-family-base);
+    font-weight: var(--typography-font-weight-regular);
+    line-height: var(--typography-line-height-normal);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.input::placeholder {
+    color: var(--color-neutral-500);
+}
+
+.input:focus {
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 2px var(--color-primary-100);
+}
+
+/* ============================================
+   VARIANTS
+   ============================================ */
+
+/* Default Variant */
+.input--default {
+    border-color: var(--color-neutral-400);
+}
+
+.input--default:hover:not(:disabled) {
+    border-color: var(--color-neutral-600);
+}
+
+/* Error Variant */
+.input--error {
+    border-color: var(--color-semantic-error-base);
+    background-color: var(--color-semantic-error-light);
+}
+
+.input--error:focus {
+    border-color: var(--color-semantic-error-base);
+    box-shadow: 0 0 0 2px var(--color-semantic-error-light);
+}
+
+.input--error::placeholder {
+    color: var(--color-semantic-error-dark);
+}
+
+/* Disabled Variant */
+.input--disabled,
+.input:disabled {
+    border-color: var(--color-neutral-400);
+    background-color: var(--color-neutral-200);
+    color: var(--color-neutral-500);
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.input--disabled::placeholder,
+.input:disabled::placeholder {
+    color: var(--color-neutral-500);
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.input--sm {
+    min-height: 32px;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--typography-font-size-sm);
+}
+
+.input--md {
+    min-height: 40px;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--typography-font-size-base);
+}
+
+.input--lg {
+    min-height: 48px;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--typography-font-size-lg);
+}
+
+/* ============================================
+   STATES
+   ============================================ */
+
+.input--full-width {
+    width: 100%;
+}