@app-studio/components 0.10.17

package/docs/components/Icon.mdx

@@ -0,0 +1,306 @@
+# Icon
+
+A comprehensive collection of SVG icons powered by [Lucide React](https://lucide.dev/), offering consistent styling, customizable colors, sizes, and orientations. All icons are optimized for accessibility and performance.
+
+### **Import**
+  ```tsx
+  import { Icon, UploadIcon, EditIcon } from '@app-studio/components';
+  ```
+
+### **Basic Usage**
+
+You can use the named exports for common icons or the generic `Icon` component for any Lucide icon.
+
+```tsx
+import React from 'react';
+import { UploadIcon, EditIcon, DeleteIcon } from '@app-studio/components';
+import { Horizontal } from '@app-studio/components';
+
+export const BasicIcons = () => (
+  <Horizontal gap={16}>
+    <UploadIcon widthHeight={24} />
+    <EditIcon widthHeight={24} />
+    <DeleteIcon widthHeight={24} />
+  </Horizontal>
+);
+```
+
+### **Dynamic Usage (All Lucide Icons)**
+
+Access any icon from the [Lucide library](https://lucide.dev/icons) using the `name` prop.
+
+```tsx
+import React from 'react';
+import { Icon } from '@app-studio/components';
+
+export const DynamicIcons = () => (
+  <Icon name="camera" widthHeight={24} color="color-primary-500" />
+);
+```
+
+### **Icon Sizes**
+```tsx
+import React from 'react';
+import { StarIcon } from '@app-studio/components';
+import { Horizontal } from '@app-studio/components';
+
+export const IconSizes = () => (
+  <Horizontal gap={16} alignItems="center">
+    <StarIcon widthHeight={16} />
+    <StarIcon widthHeight={24} />
+    <StarIcon widthHeight={32} />
+    <StarIcon widthHeight={48} />
+    <StarIcon widthHeight={64} />
+  </Horizontal>
+);
+```
+
+### **Icon Colors**
+```tsx
+import React from 'react';
+import { HeartIcon } from '@app-studio/components';
+import { Horizontal } from '@app-studio/components';
+
+export const IconColors = () => (
+  <Horizontal gap={16}>
+    <HeartIcon widthHeight={32} color="color-red-500" />
+    <HeartIcon widthHeight={32} color="color-blue-500" />
+    <HeartIcon widthHeight={32} color="color-green-500" />
+    <HeartIcon widthHeight={32} color="color-purple-500" />
+    <HeartIcon widthHeight={32} color="color-orange-500" />
+  </Horizontal>
+);
+```
+
+### **Icon Styles**
+Since we use Lucide, `filled` creates a solid style where applicable, but generally Lucide icons are line-art. The `filled` prop typically fills the path with the current color-
+
+```tsx
+import React from 'react';
+import { StarIcon, HeartIcon } from '@app-studio/components';
+import { Horizontal, Vertical, Text } from '@app-studio/components';
+
+export const IconVariants = () => (
+  <Vertical gap={16}>
+    <Text>Filled Styles</Text>
+    <Horizontal gap={16}>
+      <StarIcon widthHeight={32} filled={true} color="color-yellow-500" />
+      <HeartIcon widthHeight={32} filled={true} color="color-red-500" />
+    </Horizontal>
+
+    <Text>Line Styles</Text>
+    <Horizontal gap={16}>
+      <StarIcon widthHeight={32} filled={false} color="color-yellow-500" />
+      <HeartIcon widthHeight={32} filled={false} color="color-red-500" />
+    </Horizontal>
+  </Vertical>
+);
+```
+
+### **Icon Orientations**
+```tsx
+import React from 'react';
+import { ArrowIcon } from '@app-studio/components';
+import { Horizontal, Text } from '@app-studio/components';
+
+export const IconOrientations = () => (
+  <Horizontal gap={24} alignItems="center">
+    <div>
+      <Text fontSize={12}>Up</Text>
+      <ArrowIcon widthHeight={32} orientation="up" />
+    </div>
+    <div>
+      <Text fontSize={12}>Right</Text>
+      <ArrowIcon widthHeight={32} orientation="right" />
+    </div>
+    <div>
+      <Text fontSize={12}>Down</Text>
+      <ArrowIcon widthHeight={32} orientation="down" />
+    </div>
+    <div>
+      <Text fontSize={12}>Left</Text>
+      <ArrowIcon widthHeight={32} orientation="left" />
+    </div>
+  </Horizontal>
+);
+```
+
+### **Available Pre-exported Icons**
+
+We provide named exports for common icons for convenience and backward compatibility. For everything else, use `<Icon name="..." />`.
+
+- `ArrowIcon` (arrow-up)
+- `AttachmentIcon` (paperclip)
+- `AudioIcon` (volume)
+- `BackIcon` (chevron-left)
+- `BatteryIcon` (battery)
+- `BluetoothIcon` (bluetooth)
+- `BoldArrowIcon` (arrow-right, approximate)
+- `BookmarkIcon` (bookmark)
+- `CalendarIcon` (calendar)
+- `CameraIcon` (camera)
+- `ChartIcon` (bar-chart)
+- `CheckIcon` (check)
+- `ChevronIcon` (chevron-up)
+- `ClockIcon` (clock)
+- `CloseEyeIcon` (eye-off)
+- `CloseIcon` (x)
+- `CloudIcon` (cloud)
+- `CopyIcon` (copy)
+- `CreditCardIcon` (credit-card)
+- `CropIcon` (crop)
+- `DeleteIcon` (trash)
+- `DocumentIcon` (file-text)
+- `DownloadIcon` (download)
+- `DragHandleIcon` (grip-vertical)
+- `DragHandleLinesIcon` (grip-horizontal)
+- `DustBinIcon` (trash)
+- `EditIcon` (edit)
+- `ErrorIcon` (alert-circle)
+- `ExternalLinkIcon` (external-link)
+- `FacebookIcon` (facebook)
+- `FileIcon` (file)
+- `FilterIcon` (filter)
+- `FolderIcon` (folder)
+- `GiftIcon` (gift)
+- `HeartIcon` (heart)
+- `HelpIcon` (circle-help)
+- `HomeIcon` (home)
+- `ImageIcon` (image)
+- `InfoIcon` (info)
+- `InstagramIcon` (instagram)
+- `LayoutIcon` (layout)
+- `LikeIcon` (thumbs-up)
+- `LinkIcon` (link)
+- `LinkedinIcon` (linkedin)
+- `LoadingSpinnerIcon` (loader)
+- `LocationIcon` (map-pin)
+- `LockIcon` (lock)
+- `LogoutIcon` (log-out)
+- `MagicWandIcon` (wand)
+- `MapPinIcon` (map-pin)
+- `MenuIcon` (menu)
+- `MicrophoneIcon` (mic)
+- `MinusIcon` (minus)
+- `MoonIcon` (moon)
+- `MoreHorizontalIcon` (more-horizontal)
+- `MoreVerticalIcon` (more-vertical)
+- `NotificationIcon` (bell)
+- `OpenEyeIcon` (eye)
+- `PanelIcon` (panel-left)
+- `PauseIcon` (pause)
+- `PlayIcon` (play)
+- `PlusIcon` (plus)
+- `PowerOffIcon` (power)
+- `PrintIcon` (printer)
+- `ProfileIcon` (user)
+- `RefreshIcon` (refresh-cw)
+- `RotateIcon` (rotate-cw)
+- `SaveIcon` (save)
+- `SearchIcon` (search)
+- `SendIcon` (send)
+- `SettingsIcon` (settings)
+- `ShapeIcon` (shapes)
+- `ShareIcon` (share)
+- `ShieldIcon` (shield)
+- `SliderIcon` (sliders-horizontal)
+- `SpinnerIcon` (loader)
+- `StarIcon` (star)
+- `StopIcon` (square)
+- `SuccessIcon` (check-circle)
+- `TextIcon` (type)
+- `ThreadsIcon` (at-sign)
+- `TickIcon` (check)
+- `TrashIcon` (trash)
+- `TwitchIcon` (twitch)
+- `TwitterIcon` (twitter)
+- `UnLikeIcon` (thumbs-down)
+- `UnlockIcon` (unlock)
+- `UploadIcon` (upload)
+- `UserIcon` (user)
+- `VideoIcon` (video)
+- `WarningIcon` (triangle-alert)
+- `WifiIcon` (wifi)
+- `XIcon` (x)
+- `YoutubeIcon` (youtube)
+- `ZapIcon` (zap)
+- `ZoomInIcon` (zoom-in)
+- `ZoomOutIcon` (zoom-out)
+
+### **Props**
+
+The `Icon` component accepts the following props:
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| name | string | 'circle' | **Required for generic component.** The name of the Lucide icon to render (kebab-case). |
+| widthHeight | number | 24 | Size of the icon in pixels (sets both width and height) |
+| size | number | undefined | Alternative to widthHeight, consistent with Lucide props |
+| color | string | 'currentColor' | Color of the icon (supports theme colors) |
+| filled | boolean | false | Whether to fill the icon body with color- Note: applies to all line-art. |
+| strokeWidth | number | 1-2 | Stroke width for the icon lines |
+| orientation | `'left' \| 'right' \| 'up' \| 'down'` | 'up' | Rotates the icon |
+| transform | string | undefined | Custom CSS transform property |
+
+### **IconWrapper Props**
+
+All icons inherit from the base `IconWrapper` component which extends `ViewProps`:
+
+| Prop | Type | Description |
+| ---- | ---- | ----------- |
+| className | string | CSS class name for styling |
+| style | CSSProperties | Inline styles |
+| onClick | function | Click event handler |
+| ... | ... | Standard HTML attributes |
+
+### **Custom Icons**
+
+You generally don't need to create custom wrappers anymore, as you can use `<Icon name="..." />` directly. However, if you want to create a named export for a generic Lucide icon:
+
+```tsx
+import React from 'react';
+import { Icon } from '@app-studio/components';
+
+export const MyNewIcon = (props) => <Icon name="rocket" {...props} />;
+```
+
+### **Icon Grid Display**
+```tsx
+import React from 'react';
+import * as Icons from '@app-studio/components';
+import { View, Text } from '@app-studio/components';
+
+export const IconGrid = () => {
+  const iconNames = Object.keys(Icons).filter(name =>
+    name.endsWith('Icon') && name !== 'IconWrapper'
+  );
+
+  return (
+    <View
+      display="grid"
+      gridTemplateColumns="repeat(auto-fill, minmax(120px, 1fr))"
+      gap={16}
+    >
+      {iconNames.map((iconName) => {
+        const IconComponent = Icons[iconName as keyof typeof Icons];
+        return (
+          <View
+            key={iconName}
+            padding={12}
+            border="1px solid"
+            borderColor="color-gray-200"
+            borderRadius={8}
+            textAlign="center"
+          >
+            {/* Some icons might need specific props, generic render here */}
+             <IconComponent widthHeight={24} color="color-gray-700" />
+            <Text fontSize={10} marginTop={4}>
+              {iconName}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+```

package/docs/components/IconPicker.mdx

@@ -0,0 +1,106 @@
+# IconPicker
+
+A dropdown component for selecting icons from a predefined list (Lucide icons).
+
+### **Import**
+```tsx
+import { IconPicker } from '@app-studio/components';
+```
+
+### **Basic Usage**
+```tsx
+import React, { useState } from 'react';
+import { IconPicker } from '@app-studio/components';
+
+export const BasicUsage = () => {
+  const [icon, setIcon] = useState('user');
+
+  return (
+    <IconPicker
+      label="Select Icon"
+      value={icon}
+      onChange={setIcon}
+      placeholder="Choose an icon"
+    />
+  );
+};
+```
+
+### **Size**
+The `size` prop controls the size of the trigger and the icons.
+- **Type:** `Size`
+- **Default:** `md`
+- **Possible Values:** `xs, sm, md, lg`
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/components';
+
+export const SizeDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker size="sm" placeholder="Small (sm)" />
+    <IconPicker size="md" placeholder="Medium (md)" />
+    <IconPicker size="lg" placeholder="Large (lg)" />
+  </Vertical>
+);
+```
+
+### **Variant**
+The `variant` prop controls the visual style of the trigger.
+- **Type:** `Variant`
+- **Default:** `default`
+- **Possible Values:** `default, outline, filled`
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/components';
+
+export const VariantDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker variant="default" placeholder="Default" />
+    <IconPicker variant="outline" placeholder="Outline" />
+    <IconPicker variant="filled" placeholder="Filled" />
+  </Vertical>
+);
+```
+
+### **Shape**
+The `shape` prop controls the border radius of the trigger.
+- **Type:** `Shape`
+- **Default:** `default`
+- **Possible Values:** `default, rounded, square, pill`
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/components';
+
+export const ShapeDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker shape="default" placeholder="Default" />
+    <IconPicker shape="rounded" placeholder="Rounded" />
+    <IconPicker shape="square" placeholder="Square" />
+    <IconPicker shape="pill" placeholder="Pill" />
+  </Vertical>
+);
+```
+
+### **States**
+The component supports various states like `disabled`, `readOnly`, and `error`.
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/components';
+
+export const StatesDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker label="Disabled" isDisabled placeholder="Disabled" />
+    <IconPicker label="Read Only" isReadOnly value="lock" />
+    <IconPicker label="Error" error helperText="This field has an error" />
+  </Vertical>
+);
+```
+
+### **Props**
+
+| Prop | Type | Default | Description |
+|Data to come here|