feat: enable minification and standardize API syntax

Author: hyochan

packages/docs/docs/api.md

@@ -27,14 +27,13 @@ A new React component with the specified styles applied.
 
 ```tsx
 import { styled } from 'kstyled';
-import { View, Text } from 'react-native';
 
-const Container = styled(View)`
+const Container = styled.View`
   flex: 1;
   padding: 20px;
 `;
 
-const Title = styled(Text)<{ $large?: boolean }>`
+const Title = styled.Text<{ $large?: boolean }>`
   font-size: ${p => p.$large ? '32px' : '24px'};
   font-weight: bold;
 `;
@@ -185,15 +184,15 @@ A styled component factory with attrs applied.
 ### Example
 
 ```tsx
-const Input = styled(TextInput).attrs({
+const Input = styled.TextInput.attrs({
   placeholderTextColor: '#999',
   autoCapitalize: 'none',
 })`
   padding: 12px;
   border-radius: 8px;
 `;
 
-const Button = styled(Pressable).attrs<{ $size?: 'small' | 'large' }>(
+const Button = styled.Pressable.attrs<{ $size?: 'small' | 'large' }>(
   (props) => ({
     hitSlop: props.$size === 'small' ? 8 : 16,
   })

packages/docs/docs/getting-started/basic-usage.md

@@ -10,21 +10,20 @@ Use the `styled` function with template literals:
 
 ```tsx
 import { styled } from 'kstyled';
-import { View, Text, Pressable } from 'react-native';
 
-const Container = styled(View)`
+const Container = styled.View`
   flex: 1;
   padding: 20px;
   background-color: #f0f0f0;
 `;
 
-const Title = styled(Text)`
+const Title = styled.Text`
   font-size: 24px;
   font-weight: bold;
   color: #000;
 `;
 
-const Button = styled(Pressable)`
+const Button = styled.Pressable`
   padding: 12px 24px;
   background-color: #007AFF;
   border-radius: 8px;
@@ -53,7 +52,7 @@ export default function App() {
 kstyled supports standard CSS property names (kebab-case):
 
 ```tsx
-const Card = styled(View)`
+const Card = styled.View`
   background-color: white;
   border-radius: 12px;
   shadow-color: #000;
@@ -78,11 +77,11 @@ Properties are automatically converted to React Native's camelCase format (`back
 ### Nesting components
 
 ```tsx
-const Card = styled(View)`
+const Card = styled.View`
   padding: 16px;
 `;
 
-const CardTitle = styled(Text)`
+const CardTitle = styled.Text`
   font-size: 18px;
   font-weight: 600;
 `;

packages/docs/docs/getting-started/installation.md

@@ -61,9 +61,8 @@ Create a simple component to test:
 
 ```tsx
 import { styled } from 'kstyled';
-import { Text } from 'react-native';
 
-const Title = styled(Text)`
+const Title = styled.Text`
   font-size: 24px;
   color: #007AFF;
 `;

packages/docs/docs/guides/attrs.md

@@ -11,7 +11,7 @@ The `.attrs()` method lets you attach default props or computed props to styled
 Set default props for your components:
 
 ```tsx
-const Input = styled(TextInput).attrs({
+const Input = styled.TextInput.attrs({
   placeholderTextColor: '#999',
   autoCapitalize: 'none',
   autoCorrect: false,
@@ -32,7 +32,7 @@ const Input = styled(TextInput).attrs({
 Use a function to compute props dynamically:
 
 ```tsx
-const Button = styled(Pressable).attrs<{ $size?: 'small' | 'large' }>(
+const Button = styled.Pressable.attrs<{ $size?: 'small' | 'large' }>(
   (props) => ({
     hitSlop: props.$size === 'small' ? 8 : 16,
     accessible: true,
@@ -50,7 +50,7 @@ const Button = styled(Pressable).attrs<{ $size?: 'small' | 'large' }>(
 Use attrs to set accessibility properties:
 
 ```tsx
-const Card = styled(View).attrs({
+const Card = styled.View.attrs({
   accessible: true,
   accessibilityRole: 'button' as const,
 })`
@@ -59,7 +59,7 @@ const Card = styled(View).attrs({
   border-radius: 12px;
 `;
 
-const Heading = styled(Text).attrs({
+const Heading = styled.Text.attrs({
   accessible: true,
   accessibilityRole: 'header' as const,
 })`
@@ -73,7 +73,7 @@ const Heading = styled(Text).attrs({
 Props passed to the component override attrs:
 
 ```tsx
-const Input = styled(TextInput).attrs({
+const Input = styled.TextInput.attrs({
   placeholderTextColor: '#999',
 })`
   padding: 12px;
@@ -93,7 +93,7 @@ const Input = styled(TextInput).attrs({
 ```tsx
 import { Platform } from 'react-native';
 
-const Input = styled(TextInput).attrs({
+const Input = styled.TextInput.attrs({
   placeholderTextColor: '#999',
   ...(Platform.OS === 'ios' ? {
     keyboardAppearance: 'dark' as const,
@@ -109,7 +109,7 @@ const Input = styled(TextInput).attrs({
 You can chain multiple `.attrs()` calls:
 
 ```tsx
-const BaseButton = styled(Pressable).attrs({
+const BaseButton = styled.Pressable.attrs({
   accessible: true,
   accessibilityRole: 'button' as const,
 })`

packages/docs/docs/guides/css-inline.md

@@ -278,14 +278,14 @@ The `css` helper is processed at **runtime**, unlike `styled` which is compile-t
 
 ```tsx
 // ✅ Reusable components with static styles
-const Card = styled(View)`
+const Card = styled.View`
   padding: 16px;
   border-radius: 12px;
   background-color: white;
 `;
 
 // ✅ Component library
-const PrimaryButton = styled(Pressable)`
+const PrimaryButton = styled.Pressable`
   padding: 12px 24px;
   background-color: #007AFF;
   border-radius: 8px;

packages/docs/docs/guides/dynamic-props.md

@@ -9,7 +9,7 @@ sidebar_position: 2
 Use props prefixed with `$` to pass values to your styles. These props won't be passed to the underlying component:
 
 ```tsx
-const Button = styled(Pressable)<{ $primary?: boolean }>`
+const Button = styled.Pressable<{ $primary?: boolean }>`
   padding: 12px 24px;
   background-color: ${p => p.$primary ? '#007AFF' : '#ccc'};
   border-radius: 8px;
@@ -31,7 +31,7 @@ interface BoxProps {
   $color?: string;
 }
 
-const Box = styled(View)<BoxProps>`
+const Box = styled.View<BoxProps>`
   background-color: ${p => p.$color || '#007AFF'};
   width: ${p => {
     switch (p.$size) {
@@ -58,7 +58,7 @@ const Box = styled(View)<BoxProps>`
 ### Boolean props
 
 ```tsx
-const Badge = styled(View)<{ $active?: boolean }>`
+const Badge = styled.View<{ $active?: boolean }>`
   padding: 4px 8px;
   border-radius: 4px;
   background-color: ${p => p.$active ? '#34C759' : '#8E8E93'};
@@ -70,7 +70,7 @@ const Badge = styled(View)<{ $active?: boolean }>`
 ```tsx
 type Variant = 'primary' | 'secondary' | 'success' | 'danger';
 
-const Button = styled(Pressable)<{ $variant?: Variant }>`
+const Button = styled.Pressable<{ $variant?: Variant }>`
   padding: 12px 24px;
   border-radius: 8px;
   background-color: ${p => {
@@ -90,7 +90,7 @@ const Button = styled(Pressable)<{ $variant?: Variant }>`
 Static styles are compiled, dynamic styles computed at runtime:
 
 ```tsx
-const Card = styled(View)<{ $highlighted?: boolean }>`
+const Card = styled.View<{ $highlighted?: boolean }>`
   /* Static - compiled */
   padding: 16px;
   border-radius: 12px;
@@ -108,7 +108,7 @@ For best performance, keep dynamic styles minimal. More static styles = better p
 
 ```tsx
 // Good - mostly static
-const Button = styled(Pressable)<{ $primary?: boolean }>`
+const Button = styled.Pressable<{ $primary?: boolean }>`
   padding: 12px 24px;
   border-radius: 8px;
   font-size: 16px;
@@ -117,7 +117,7 @@ const Button = styled(Pressable)<{ $primary?: boolean }>`
 `;
 
 // Less optimal - everything dynamic
-const Button = styled(Pressable)<{ $size?: number; $radius?: number }>`
+const Button = styled.Pressable<{ $size?: number; $radius?: number }>`
   padding: ${p => p.$size || 12}px;
   border-radius: ${p => p.$radius || 8}px;
   font-size: ${p => (p.$size || 12) + 4}px;

packages/docs/docs/guides/extending-styles.md

@@ -0,0 +1,94 @@
+---
+sidebar_position: 5
+---
+
+# Extending Styles
+
+You can extend existing styled components to inherit and override their styles.
+
+## Basic inheritance
+
+```tsx
+const BaseButton = styled.Pressable`
+  padding: 12px 24px;
+  border-radius: 8px;
+  align-items: center;
+`;
+
+const PrimaryButton = styled(BaseButton)`
+  background-color: #007AFF;
+`;
+
+const SecondaryButton = styled(BaseButton)`
+  background-color: #6c757d;
+`;
+```
+
+## Overriding styles
+
+Child components can override parent styles:
+
+```tsx
+const Card = styled.View`
+  padding: 16px;
+  background-color: white;
+  border-radius: 8px;
+`;
+
+const HighlightCard = styled(Card)`
+  background-color: #fff3cd;
+  border-width: 2px;
+  border-color: #ffc107;
+`;
+```
+
+## Adding dynamic props
+
+```tsx
+const BaseText = styled.Text`
+  font-size: 16px;
+  color: #000;
+`;
+
+const DynamicText = styled(BaseText)<{ $bold?: boolean }>`
+  font-weight: ${p => p.$bold ? 'bold' : 'normal'};
+`;
+```
+
+## Combining with attrs
+
+```tsx
+const BaseInput = styled.TextInput`
+  padding: 12px;
+  border-width: 1px;
+  border-radius: 8px;
+`;
+
+const EmailInput = styled(BaseInput).attrs({
+  keyboardType: 'email-address',
+  autoCapitalize: 'none',
+})`
+  border-color: #007AFF;
+`;
+```
+
+## Style priority
+
+When combining styled components with inline styles, inline `style` prop and `css` prop have higher priority:
+
+```tsx
+const Button = styled.Pressable`
+  background-color: #007AFF;
+  padding: 12px;
+`;
+
+// Inline style overrides styled component styles
+<Button style={{ backgroundColor: '#ff0000' }}>
+  Red Button
+</Button>
+
+// css prop also has higher priority
+<Button style={css`background-color: #00ff00;`}>
+  Green Button
+</Button>
+```