@rafal.lemieszewski/tide-ui 0.41.4 → 0.43.0

package/README.md

@@ -25,26 +25,12 @@ Make sure you have React 18+ installed:
 npm install react@>=18.0.0 react-dom@>=18.0.0
 ```
 
-### Setup Tailwind CSS
-
-This library requires Tailwind CSS. Add the preset to your `tailwind.config.js`:
-
-```javascript
-module.exports = {
-  presets: [
-    // Add Tide UI preset here when available
-  ],
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@rafal.lemieszewski/tide-ui/**/*.{js,ts,jsx,tsx}",
-  ],
-  // ... rest of your config
-}
-```
-
 ## Quick Start
 
+Import the CSS styles and components:
+
 ```typescript
+import '@rafal.lemieszewski/tide-ui/styles'
 import { Button, Card, CardContent, Badge } from '@rafal.lemieszewski/tide-ui'
 
 function App() {
@@ -61,6 +47,52 @@ function App() {
 }
 ```
 
+## Styling & Customization
+
+### CSS Variables
+
+Override design tokens by customizing CSS variables:
+
+```css
+:root {
+  --color-background-brand: #your-color;
+  --color-text-primary: #your-color;
+  /* See src/index.css for all available variables */
+}
+```
+
+### className Prop
+
+All components accept a `className` prop for custom styling:
+
+```tsx
+import { Button } from '@rafal.lemieszewski/tide-ui'
+
+// Using custom CSS classes
+<Button className="my-custom-class">Custom Button</Button>
+
+// Using inline styles
+<Button style={{ backgroundColor: 'purple' }}>Purple Button</Button>
+```
+
+### Tailwind Utility Classes
+
+**For apps with Tailwind CSS installed:** You can use Tailwind utility classes to override component styles. Use the `!` prefix for guaranteed specificity:
+
+```tsx
+// Override background color
+<Button className="!bg-purple-500 !hover:bg-purple-600">
+  Purple Button
+</Button>
+
+// Override spacing
+<Card className="!p-8 !rounded-xl">
+  Custom Card
+</Card>
+```
+
+**Note:** Tailwind is not required. The library includes all necessary styles out-of-the-box.
+
 ## Available Components
 
 ### Core Components

package/dist/components/index.d.ts

@@ -4,6 +4,8 @@ export { Chart, generateChartColors, createChartConfig, chartColorSchemes } from
 export type { ChartProps, ChartConfig, ChartDataPoint, ChartType, ChartColorScheme } from './ui/chart';
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, avatarFallbackVariants } from './ui/avatar';
 export type { AvatarProps, AvatarFallbackProps } from './ui/avatar';
+export { AvatarGroup } from './ui/avatar-group';
+export type { AvatarGroupProps, AvatarGroupSize } from './ui/avatar-group';
 export { Badge } from './ui/badge';
 export type { BadgeProps } from './ui/badge';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible';
@@ -27,8 +29,10 @@ export type { FixtureStatusProps, StatusValue, StatusConfig } from './ui/fixture
 export { Switch } from './ui/switch';
 export { Textarea } from './ui/textarea';
 export type { TextareaProps } from './ui/textarea';
-export { Timeline, TimelineItem, TimelineSeparator, TimelineHeader, TimelineContent, TimelineDescription, TimelineTime, TimelineChevron, } from './ui/timeline';
-export type { TimelineProps, TimelineItemProps, TimelineSeparatorProps, TimelineHeaderProps, TimelineContentProps, TimelineDescriptionProps, TimelineTimeProps, TimelineChevronProps, } from './ui/timeline';
+export { ActivityLog, ActivityLogItem, ActivityLogSeparator, ActivityLogHeader, ActivityLogContent, ActivityLogDescription, ActivityLogTime, ActivityLogChevron, ActivityLogValue, } from './ui/activity-log';
+export type { ActivityLogProps, ActivityLogItemProps, ActivityLogSeparatorProps, ActivityLogHeaderProps, ActivityLogContentProps, ActivityLogDescriptionProps, ActivityLogTimeProps, ActivityLogChevronProps, ActivityLogValueProps, } from './ui/activity-log';
+export { AttributesList, AttributesSeparator, AttributesGroup, AttributesItem, AttributesRow, AttributesLabel, AttributesValue, AttributesContent, AttributesChevron, } from './ui/attributes-list';
+export type { AttributesListProps, AttributesSeparatorProps, AttributesGroupProps, AttributesItemProps, AttributesRowProps, AttributesLabelProps, AttributesValueProps, AttributesContentProps, AttributesChevronProps, } from './ui/attributes-list';
 export { Editable, EditablePreview, EditableInput, EditableDisplay, EditableField } from './ui/editable';
 export type { EditableProps, EditablePreviewProps, EditableInputProps } from './ui/editable';
 export { FormField, FormLabel, FormControl, FormHelperText, FormErrorMessage } from './ui/form-field';

package/dist/components/ui/activity-log.d.ts

@@ -0,0 +1,61 @@
+import { CollapsibleContent } from './collapsible';
+import * as React from "react";
+export interface ActivityLogProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Time threshold in milliseconds. If the time difference between consecutive
+     * ActivityLogItem timestamps exceeds this value, a ActivityLogSeparator will be
+     * automatically inserted between them.
+     */
+    separatorThreshold?: number;
+}
+declare const ActivityLog: React.ForwardRefExoticComponent<ActivityLogProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActivityLogItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether this timeline item can be expanded/collapsed
+     */
+    collapsible?: boolean;
+    /**
+     * Default open state for uncontrolled collapsible items
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Timestamp for this activity log item (used for automatic separator insertion)
+     */
+    timestamp?: Date | number | string;
+}
+declare const ActivityLogItem: React.ForwardRefExoticComponent<ActivityLogItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActivityLogSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ActivityLogSeparator: React.ForwardRefExoticComponent<ActivityLogSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActivityLogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, the header will render as a CollapsibleTrigger
+     * This is automatically set when ActivityLogItem has collapsible={true}
+     */
+    asCollapsibleTrigger?: boolean;
+}
+declare const ActivityLogHeader: React.ForwardRefExoticComponent<ActivityLogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActivityLogContentProps extends React.ComponentPropsWithoutRef<typeof CollapsibleContent> {
+}
+declare const ActivityLogContent: React.ForwardRefExoticComponent<ActivityLogContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActivityLogDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ActivityLogDescription: React.ForwardRefExoticComponent<ActivityLogDescriptionProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActivityLogTimeProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const ActivityLogTime: React.ForwardRefExoticComponent<ActivityLogTimeProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface ActivityLogChevronProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ActivityLogChevron: React.ForwardRefExoticComponent<ActivityLogChevronProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActivityLogValueProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ActivityLogValue: React.ForwardRefExoticComponent<ActivityLogValueProps & React.RefAttributes<HTMLDivElement>>;
+export { ActivityLog, ActivityLogItem, ActivityLogSeparator, ActivityLogHeader, ActivityLogContent, ActivityLogDescription, ActivityLogTime, ActivityLogChevron, ActivityLogValue, };

package/dist/components/ui/attributes-list.d.ts

@@ -0,0 +1,94 @@
+import { CollapsibleContent } from './collapsible';
+import * as React from "react";
+export interface AttributesListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Label for the "View all" button that shows hidden items
+     * @default "More details"
+     */
+    showHiddenLabel?: string;
+    /**
+     * Label for the "View less" button that hides hidden items
+     * @default "Less details"
+     */
+    hideLabel?: string;
+    /**
+     * Default visibility state for hidden items
+     */
+    defaultShowHidden?: boolean;
+}
+declare const AttributesList: React.ForwardRefExoticComponent<AttributesListProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const AttributesSeparator: React.ForwardRefExoticComponent<AttributesSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section label/header
+     */
+    label?: string;
+    /**
+     * Label for the "View all" button that shows hidden items
+     * @default "More details"
+     */
+    showHiddenLabel?: string;
+    /**
+     * Label for the "View less" button that hides hidden items
+     * @default "Less details"
+     */
+    hideLabel?: string;
+    /**
+     * Default visibility state for hidden items
+     */
+    defaultShowHidden?: boolean;
+}
+declare const AttributesGroup: React.ForwardRefExoticComponent<AttributesGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether this item can be expanded/collapsed
+     */
+    collapsible?: boolean;
+    /**
+     * Default open state for uncontrolled collapsible items
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether this item should be hidden until "View all" is clicked
+     */
+    hidden?: boolean;
+}
+declare const AttributesItem: React.ForwardRefExoticComponent<AttributesItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, the row will render as a CollapsibleTrigger
+     * This is automatically set when AttributesItem has collapsible={true}
+     */
+    asCollapsibleTrigger?: boolean;
+    /**
+     * Optional external link configuration
+     */
+    externalLink?: {
+        href: string;
+        label: string;
+    };
+}
+declare const AttributesRow: React.ForwardRefExoticComponent<AttributesRowProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const AttributesLabel: React.ForwardRefExoticComponent<AttributesLabelProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesValueProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const AttributesValue: React.ForwardRefExoticComponent<AttributesValueProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesContentProps extends React.ComponentPropsWithoutRef<typeof CollapsibleContent> {
+}
+declare const AttributesContent: React.ForwardRefExoticComponent<AttributesContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface AttributesChevronProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const AttributesChevron: React.ForwardRefExoticComponent<AttributesChevronProps & React.RefAttributes<HTMLDivElement>>;
+export { AttributesList, AttributesSeparator, AttributesGroup, AttributesItem, AttributesRow, AttributesLabel, AttributesValue, AttributesContent, AttributesChevron, };

package/dist/components/ui/avatar-group.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+declare const avatarGroupOverlapClasses: {
+    readonly xxs: "-ml-[6px]";
+    readonly xs: "-ml-[var(--space-xsm)]";
+    readonly sm: "-ml-[var(--space-sm)]";
+    readonly md: "-ml-[var(--space-md)]";
+    readonly lg: "-ml-[var(--space-lg)]";
+    readonly xl: "-ml-[var(--space-lg)]";
+};
+export type AvatarGroupSize = keyof typeof avatarGroupOverlapClasses;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Size of avatars in the group (determines overlap amount) */
+    size?: AvatarGroupSize;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { AvatarGroup };

package/dist/components/ui/avatar.d.ts

@@ -3,11 +3,11 @@ import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 declare const avatarVariants: (props?: ({
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    shape?: "circle" | "rounded" | null | undefined;
+    type?: "user" | "organization" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const avatarFallbackVariants: (props?: ({
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    shape?: "circle" | "rounded" | null | undefined;
+    type?: "user" | "organization" | null | undefined;
     variant?: "success" | "warning" | "magenta" | "violet" | "information" | "error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {

package/dist/components/ui/fixture-status.d.ts

@@ -23,6 +23,8 @@ export interface FixtureStatusProps extends React.HTMLAttributes<HTMLDivElement>
     showObject?: boolean;
     /** Whether the label color should match the icon color (default: true) */
     coloredLabel?: boolean;
+    /** Whether to show only the icon with a tooltip (default: false) */
+    iconOnly?: boolean;
 }
 declare const FixtureStatus: React.ForwardRefExoticComponent<FixtureStatusProps & React.RefAttributes<HTMLDivElement>>;
 export { FixtureStatus, statusConfig };

package/dist/components/ui/icon.d.ts

@@ -16,6 +16,7 @@ declare const iconColors: {
     readonly "brand-hover": "text-[var(--color-icon-brand-hover)]";
     readonly "on-action": "text-[var(--color-icon-on-action)]";
     readonly inverse: "text-[var(--color-icon-inverse)]";
+    readonly violet: "text-[var(--violet-500)]";
 };
 declare const iconSizes: {
     readonly sm: "w-[var(--size-3xsm)] h-[var(--size-3xsm)]";