oxios 1.10.1

Oxios Agent OS — Agent Operating System powered by oxi-sdk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

import type { Meta, StoryObj } from '@storybook/tanstack-react'
import { ArrowRight, Loader2, Mail, Plus } from 'lucide-react'
import { Button } from '@/components/ui/button'

const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  args: {
    children: 'Button',
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'secondary', 'outline', 'ghost', 'destructive', 'link'],
    },
    size: {
      control: 'select',
      options: ['default', 'sm', 'lg', 'icon'],
    },
  },
}

export default meta
type Story = StoryObj<typeof Button>

// ── Dimension 1: Variants ────────────────────────────────

export const Default: Story = { args: { variant: 'default' } }
export const Secondary: Story = { args: { variant: 'secondary' } }
export const Outline: Story = { args: { variant: 'outline' } }
export const Ghost: Story = { args: { variant: 'ghost' } }
export const Destructive: Story = { args: { variant: 'destructive' } }
export const Link: Story = { args: { variant: 'link' } }

export const AllVariants: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  ),
}

// ── Dimension 2: Sizes ───────────────────────────────────

export const Small: Story = { args: { size: 'sm', children: 'Small' } }
export const DefaultSize: Story = { args: { size: 'default', children: 'Default' } }
export const Large: Story = { args: { size: 'lg', children: 'Large' } }
export const IconOnly: Story = {
  args: { size: 'icon', children: <Mail className="h-4 w-4" /> },
}

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <Mail className="h-4 w-4" />
      </Button>
    </div>
  ),
}

// ── Dimension 3: States ──────────────────────────────────

export const Disabled: Story = {
  args: { disabled: true, children: 'Disabled' },
}

// ── Dimension 7: Slot / Children ─────────────────────────

export const WithLeadingIcon: Story = {
  args: {
    children: (
      <>
        <Plus className="h-4 w-4" /> Add Item
      </>
    ),
  },
}

export const WithTrailingIcon: Story = {
  args: {
    children: (
      <>
        Next <ArrowRight className="h-4 w-4" />
      </>
    ),
  },
}

export const LoadingState: Story = {
  args: {
    children: (
      <>
        <Loader2 className="h-4 w-4 animate-spin" /> Loading
      </>
    ),
    disabled: true,
  },
}

// ── Dimension 4: Theme ───────────────────────────────────

export const ThemeComparison: Story = {
  render: () => (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
      <div style={{ padding: '1rem' }}>
        <p style={{ marginBottom: '0.5rem', fontSize: '0.75rem', opacity: 0.6 }}>Light</p>
        <Button variant="default">Light Button</Button>
      </div>
      <div
        className="dark"
        style={{
          padding: '1rem',
          background: 'oklch(0.141 0.005 285.823)',
          borderRadius: '0.5rem',
        }}
      >
        <p
          style={{
            marginBottom: '0.5rem',
            fontSize: '0.75rem',
            color: 'oklch(0.985 0 0)',
            opacity: 0.6,
          }}
        >
          Dark
        </p>
        <Button variant="default">Dark Button</Button>
      </div>
    </div>
  ),
}

// ── Dimension 11: Edge Cases ─────────────────────────────

export const LongText: Story = {
  args: { children: 'This is a very long button label that should handle overflow gracefully' },
}