@app-studio/web 0.9.50 → 0.9.51

package/docs/components/Background.mdx

@@ -104,6 +104,21 @@ export const DefaultDemo = () => (
       </Background.Gradient>
     </Vertical>
 
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Background Video
+      </Text>
+      <Background.Video
+        src="https://www.w3schools.com/html/mov_bbb.mp4"
+        height="200px"
+        overlay="rgba(0,0,0,0.3)"
+      >
+        <Text color="white" fontSize={18} fontWeight="500">
+          Video Background
+        </Text>
+      </Background.Video>
+    </Vertical>
+
     <Vertical gap={16}>
       <Text fontSize={14} color="color.gray.600">
         Multi-color Gradient

package/docs/components/Selector.mdx

@@ -0,0 +1,78 @@
+# Selector
+
+A segmented control UI component for selecting from a limited list of options, typically used for toggling states or selecting mutually exclusive options like complexity or priority.
+
+## Props
+
+| Prop           | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| options          | { label: string; value: string; color?: string }[] | Array of options for the selector. `color` defaults to primary theme color if not specified.                                       |         |
+| label            | string        | Label for the selector group, displayed with an icon.                                                                                                                |         |
+| id               | string        | ID for the form field.                                                                                                                                    |         |
+| name             | string        | Name attribute for the form field.                                                                                                                        |         |
+| value            | string        | The currently selected value.                                                                                                                             |         |
+| onChange         | (value: any) => void | Callback function when selection changes.                                                                                                        |         |
+| views            | SelectorStyles | Custom styles for internal sub-components (container, item, etc.).                                                                                       |         |
+
+### **Import**
+  ```tsx
+  import { Selector } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Selector } from '@app-studio/web';
+
+export const DefaultSelector = () => (
+  <Selector
+    options={[
+      { label: 'Option A', value: 'A' },
+      { label: 'Option B', value: 'B' },
+      { label: 'Option C', value: 'C' },
+    ]}
+    label="Standard Selection"
+  />
+);
+```
+
+### **Complexity Example (Colored Options)**
+Display options with specific semantic colors for active states, suitable for indicating status levels like Low, Medium, High.
+
+```tsx
+import React from 'react';
+import { Selector } from '@app-studio/web';
+
+export const ComplexitySelector = () => (
+  <Selector
+    label="Complexity"
+    options={[
+      { label: 'Low', value: 'Low', color: 'color.emerald.500' },
+      { label: 'Medium', value: 'Medium', color: 'color.amber.500' },
+      { label: 'High', value: 'High', color: 'color.red.500' },
+    ]}
+  />
+);
+```
+
+### **Custom Styling**
+Apply custom styles to the container or items using the `views` prop.
+
+```tsx
+import React from 'react';
+import { Selector } from '@app-studio/web';
+
+export const CustomStyleSelector = () => (
+  <Selector
+    label="Custom Styled"
+    views={{
+      container: { backgroundColor: 'color.gray.50' },
+      item: { fontSize: '14px', fontStyle: 'italic' }
+    }}
+    options={[
+      { label: 'One', value: '1' },
+      { label: 'Two', value: '2' },
+    ]}
+  />
+);
+```

package/docs/components/Title.mdx

@@ -276,3 +276,96 @@ export const ResponsiveTitle = () => {
 };
 ```
 
+### **highlightTypewriter**
+Adds a typewriter effect to the highlighted text.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const TypewriterTitle = () => (
+  <Vertical gap={32}>
+    <Title
+      size="md"
+      highlightText="Typewriter Effect"
+      highlightTypewriter={true}
+      highlightTypewriterDuration={3000}
+      highlightStyle="gradient"
+      highlightColor="theme.primary"
+      highlightSecondaryColor="theme.secondary"
+    >
+      Title with
+    </Title>
+  </Vertical>
+);
+```
+
+### **highlightSlide**
+Adds a slide entry effect to the highlighted text.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const SlideTitle = () => (
+  <Vertical gap={32}>
+    <Title
+      size="md"
+      highlightText="Slide Effect"
+      highlightSlide={true}
+      highlightSlideDuration={500}
+      highlightStyle="background"
+      highlightColor="theme.accent"
+    >
+      Title with
+    </Title>
+    
+    <Title
+        size="md"
+        highlightText={["Slide", "Effect", "Multiple"]}
+        highlightSlide={true}
+        highlightSlideSequential={true}
+        highlightSlideStagger={200}
+        highlightStyle="underline"
+        highlightColor="theme.primary"
+    >
+        Sequential
+    </Title>
+  </Vertical>
+);
+```
+
+### **alternateHighlightText**
+Cycles through an array of strings, replacing the highlighted text.
+
+- **Type:** `string[]`
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const AlternateTitle = () => (
+  <Vertical gap={32}>
+    <Title
+      size="md"
+      highlightText="Amazing"
+      alternateHighlightText={['Incredible', 'Fantastic', 'Awesome']}
+      alternateAnimation={true}
+      alternateDuration={2000}
+      highlightStyle="underline"
+      highlightColor="theme.success"
+    >
+      Title with Rotating Words:
+    </Title>
+  </Vertical>
+);
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.50",
+  "version": "0.9.51",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [
@@ -112,7 +112,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
-    "app-studio": "^0.6.35",
+    "app-studio": "^0.6.46",
     "async-mutex": "^0.5.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",