Floating component

apps/doc/.storybook/style.css

@@ -1,2 +1,15 @@
 @import 'crossed.css';
-@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
+.sb-story, #storybook-root{position: relative;}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 8px;
+  background-color: transparent; /* or add it to the track */
+}
+*::-webkit-scrollbar-thumb {
+  background-color: gray;
+  border-radius: 20px;
+  cursor: pointer;
+  /* @apply bg-gray rounded-full cursor-pointer; */
+}

apps/doc/src/@crossed-ui/FlatList.stories.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FlatList } from '@crossed/ui/src/other/ScrollView/FlatList';
+import { Text } from '@crossed/ui';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof FlatList> = {
+  component: FlatList,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {},
+  render: (e) => <FlatList {...e} />,
+};
+
+export default meta;
+type Story = StoryObj<typeof FlatList>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const AnySticky: Story = {
+  args: {
+    stickyHeader: false,
+    stickyFooter: false,
+    animatedStyle: { height: 500 },
+    data: Array.from(Array(100).keys()),
+    renderItem: ({ item }) => <Text>{item}</Text>,
+    title: <Text>Title</Text>,
+    footer: <Text>footer</Text>,
+  },
+};
+export const StickyHeader: Story = {
+  ...AnySticky,
+  args: { ...AnySticky.args, stickyHeader: true },
+};
+export const StickyFooter: Story = {
+  ...AnySticky,
+  args: { ...AnySticky.args, stickyFooter: true },
+};
+export const StickyHeaderFooter: Story = {
+  ...AnySticky,
+  args: {
+    ...AnySticky.args,
+    style: { height: 500 },
+    stickyHeader: true,
+    stickyFooter: true,
+  },
+};

apps/doc/src/@crossed-ui/Floating.stories.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { YBox, Button, Text } from '@crossed/ui';
+import { Floating } from '@crossed/ui/src/overlay/Floating';
+import { inlineStyle } from '@crossed/styled';
+
+const meta: Meta<typeof Floating> = {
+  component: Floating,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  subcomponents: {
+    'Floating.Trigger': Floating.Trigger,
+    'Floating.Content': Floating.Content,
+    'Floating.Overlay': Floating.Overlay,
+    'Floating.Portal': Floating.Portal,
+  },
+  render({ closeOnPress, ...e }: any) {
+    return (
+      <YBox style={inlineStyle(() => ({ base: { padding: 100 } }))}>
+        <Floating {...e}>
+          <Floating.Trigger asChild>
+            <Button>
+              <Button.Text>Button</Button.Text>
+            </Button>
+          </Floating.Trigger>
+          <Floating.Portal>
+            <Floating.Overlay />
+            <Floating.Content>
+              <Text>Hello world</Text>
+              <Button>
+                <Button.Text>focus</Button.Text>
+              </Button>
+            </Floating.Content>
+          </Floating.Portal>
+        </Floating>
+      </YBox>
+    );
+  },
+  argTypes: {
+    visibilityHidden: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

apps/doc/src/@crossed-ui/FocusScope.stories.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  FocusScope,
+  type FocusScopeProps,
+} from '@crossed/ui/src/other/FocusScope';
+import { useRef } from 'react';
+import { createStyles } from '@crossed/styled';
+import { Box, Button } from '@crossed/ui';
+
+const Render = (e: FocusScopeProps) => {
+  const style = useRef(
+    createStyles(() => ({
+      focus: { ':focus': { backgroundColor: 'green' } },
+    }))
+  ).current;
+  return (
+    <FocusScope {...e}>
+      <Button style={style.focus}>
+        <Button.Text>button</Button.Text>
+      </Button>
+    </FocusScope>
+  );
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof FocusScope> = {
+  component: FocusScope,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {},
+  render: Render,
+};
+
+export default meta;
+type Story = StoryObj<typeof FocusScope>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    enabled: true,
+  },
+};
+
+const Render2 = (e: FocusScopeProps) => {
+  const style = useRef(
+    createStyles(() => ({
+      focus: { ':focus': { backgroundColor: 'green' } },
+    }))
+  ).current;
+  return (
+    <FocusScope {...e}>
+      <Box>
+        <Button style={style.focus}>
+          <Button.Text>button</Button.Text>
+        </Button>
+      </Box>
+    </FocusScope>
+  );
+};
+
+export const WithBoxChildren: Story = {
+  args: {
+    enabled: true,
+    trapped: true,
+  },
+  render: Render2,
+};

apps/doc/src/@crossed-ui/Forms/Select.stories.tsx

@@ -7,46 +7,46 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Select } from '@crossed/ui/src/forms/Select';
+import { SelectNew } from '@crossed/ui/src/forms/SelectNew';
 import { YBox } from '@crossed/ui';
 import { inlineStyle } from '@crossed/styled';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<typeof Select> = {
-  component: Select,
+const meta: Meta<typeof SelectNew> = {
+  component: SelectNew,
   subcomponents: {
-    'Select.Trigger': Select.Trigger,
-    'Select.Trigger.Text': Select.Trigger.Text,
-    'Select.Value': Select.Value,
-    'Select.Content': Select.Content,
-    'Select.Option': Select.Option,
+    'Select.Trigger': SelectNew.Trigger,
+    // 'Select.Trigger.Text': Select.Trigger.Text,
+    'Select.Value': SelectNew.Value,
+    'Select.Content': SelectNew.Content,
+    'Select.Option': SelectNew.Option,
   },
   tags: ['autodocs'],
   parameters: { layout: 'padded' },
   argTypes: {
     label: { control: 'text' },
-    clearable: { control: 'boolean' },
-    error: { control: 'text' },
-    description: { control: 'text' },
-    extra: { control: 'text' },
+    // clearable: { control: 'boolean' },
+    // error: { control: 'text' },
+    // description: { control: 'text' },
+    // extra: { control: 'text' },
   },
   render: (e) => (
-    <YBox {...e} style={inlineStyle(() => ({ base: { padding: 100 } }))}>
-      <Select>
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Option value="Select 1">Select 1</Select.Option>
-          <Select.Option value="Select 2">Select 2</Select.Option>
-        </Select.Content>
-      </Select>
+    <YBox style={inlineStyle(() => ({ base: { padding: 100 } }))}>
+      <SelectNew {...e}>
+        <SelectNew.Trigger>
+          <SelectNew.Value />
+        </SelectNew.Trigger>
+        <SelectNew.Content>
+          <SelectNew.Option value="1">Select 1</SelectNew.Option>
+          <SelectNew.Option value="2">Select 2</SelectNew.Option>
+        </SelectNew.Content>
+      </SelectNew>
     </YBox>
   ),
 };
 
 export default meta;
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof SelectNew>;
 
 export const Primary: Story = {
   parameters: {
@@ -56,25 +56,32 @@ export const Primary: Story = {
   },
   args: {
     label: 'My label',
-    description: 'Your description',
-    extra: '',
-    clearable: false,
-    error: '',
+    // description: 'Your description',
+    // extra: '',
+    // clearable: false,
+    // error: '',
+  },
+};
+export const DefaultValue: Story = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    value: '2',
   },
 };
 export const Clearabled: Story = {
   ...Primary,
   args: {
     ...Primary.args,
-    clearable: true,
+    // clearable: true,
   },
 };
 
 export const Error: Story = {
   ...Primary,
   args: {
     ...Primary.args,
-    error: 'One error',
+    // error: 'One error',
   },
 };
 

apps/doc/src/@crossed-ui/Forms/TextArea.stories.tsx

@@ -91,7 +91,7 @@ export const WithLeftElement: Story = {
   ...Primary,
   args: {
     ...Primary.args,
-    elementLeft: <Text>Left</Text>,
+    // elementLeft: <Text>Left</Text>,
     value: 'one value',
   },
 };